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

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>
  );
}

CodePudding user response：

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);

CodePudding user response：

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>
  )
)