Filtering Data based on the selected item from a checkbox not working in React

Question

In my react code, I have a default data that display anytime there's no checkbox checked but when there's a checked value, the data should update and return another data based on the checked value. but what I have at the moment is not giving me what I expect. Kindly help me check what I'm doing wrong.

what I'm expecting is for the table to return another table with the checked value...anywhere the checked value is found in the table else, if not found return default data

my sandbox sandbox link

App.js

import React from "react";
import "./styles.css";
import { useState, useEffect } from "react";
import DefaultData from "./DefaultData";

export default function App() {
  const [isselected, setisselected] = useState([]);

  const OnChange = (e) => {
    console.log(e.target.checked);
    const ischecked = e.target.checked;
    if (ischecked) {
      setisselected([...isselected, e.target.value]);
    } else {
      const index = isselected.indexOf(e.target.value);
      isselected.splice(index, 1);
      setisselected(isselected);
    }

    console.log(isselected);
  };

  useEffect(() => {
    console.log(isselected, "value selected");
  }, [isselected]);

  return (
    <div className="App">
      <span>
        Filters applied:{" "}
        {isselected.map((i) => (
          <span>{i}</span>
        ))}
      </span>

      <div className="first-search">
        <input
          type="checkbox"
          className="input-1"
          value="Lastsevendays"
          name="last_seven"
          id="1"
          onChange={OnChange}
        />
        <label htmlFor="">Last 7 days</label>
      </div>

      <div className="first-search">
        <input
          type="checkbox"
          className="input-1"
          name="last24"
          value="last_24"
          id="2"
          onChange={OnChange}
        />
        <label htmlFor="">Last 24 hours</label>

        <table>
          <thead>
            <tr>
              <th>Header1</th>
              <th>Header2</th>
              <th>Header3</th>
            </tr>
          </thead>
          <tbody>
            {
              !isselected.length ? DefaultData.filter(x => x === '3 days ago').map((item, index)=>{
                <tr>
                <td>{item.includes}</td>
                <td>{item.date_listed}</td>
                <td>{item.id}</td>
              </tr>
              }) : DefaultData.map((item, index) => {
                return (
                  <tr>
                    <td>{item.distance}</td>
                    <td>{item.date_listed}</td>
                    <td>{item.id}</td>
                  </tr>
                );
              })



            }
          </tbody>
        </table>
      </div>
    </div>
  );
}

I'm seeing an error in the sandbox url - Default is undefined. Are you planning to correct it? — Pankaj
– Pankaj, Commented Nov 3, 2021 at 10:25
what I'm expecting is for the table to return another table with the checked value...anywhere the checked value is found in the table else, if not found return default data @MarioNikolaus — s life
– s life, Commented Nov 3, 2021 at 10:31
Why do you have this in your render .filter(x => x === '3 days ago') — Mario Nikolaus
– Mario Nikolaus, Commented Nov 3, 2021 at 10:34

Mario Nikolaus · Accepted Answer · 2021-11-03 11:12:39Z

1

You really never apply your filters, so that's why they don't work.

Your code should look something like this(this is negative branch of ternary operator on L71)

DefaultData
  .filter(item => isSelected.includes(item.date_listed))
  .map((item) => (
    <tr key={item.id}>
      <td>{item.distance}</td>
      <td>{item.date_listed}</td>
      <td>{item.id}</td>
    </tr>
  )
)

answered Nov 3, 2021 at 11:12

Mario Nikolaus

2,4061 gold badge23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

s life Over a year ago

Thank you @MarioNikolaus I tried your code but still not working

Mario Nikolaus Over a year ago

What do you mean by not working, update your question please with latest code

Julien Lemaître · Accepted Answer · 2021-11-03 11:52:36Z

1

3 things :

1 - You make a mistake in your `onChange` function

You mutate the array isselected and send it as argument to setisselected.

isselected.splice(index, 1);
  setisselected(isselected);

It is considered to be the same object as the already existing value isselected and so it is not updated.

You should not mutate this array directly, but manipulate a shallow copy and send it as value. For example :

const newSelection = Array.from(isselected);
newSelection.splice(index, 1);
setisselected(newSelection);

2 - You're not filtering correctly

DefaultData is an array of object with date_listed properties you want to filter on, so you to do it like this :

DefaultData.filter(x => x.date_listed === '3 days ago')

3 - bracket parenthesis mismatch

You used brackets instead of parenthesis here :

.map((item, index)=>(
            <tr>
            <td>{item.includes}</td>
            <td>{item.date_listed}</td>
            <td>{item.id}</td>
          </tr>
          ))

edited Nov 3, 2021 at 11:52

answered Nov 3, 2021 at 10:52

Julien Lemaître

1251 silver badge7 bronze badges

2 Comments

s life Over a year ago

But do I still need the index @JulienLemaitre but I'm still not getting what I needed

s life Over a year ago

Thank you everyone. It's working now

Collectives™ on Stack Overflow

Filtering Data based on the selected item from a checkbox not working in React

2 Answers 2

2 Comments

1 - You make a mistake in your `onChange` function

2 - You're not filtering correctly

3 - bracket parenthesis mismatch

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 - You make a mistake in your onChange function

2 - You're not filtering correctly

3 - bracket parenthesis mismatch

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

1 - You make a mistake in your `onChange` function