Why isn't my function pushing all checked items to the array (ReactJs)?-CodePudding

I have some data that I am mapping through and displaying items accordingly. My if statements all work UNTIL I select more than one checkbox. Question: Why does it only work when ONE item is checked, but not TWO? (or three, etc.)

My Component:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const data = [
    { name: "title 1" },
    { name: "title 2" },
    { name: "title 3" },
    { name: "title 4" },
    { name: "title 5" }
  ];

  const [checkBoxSearch, setCheckBoxSearch] = useState([]);
  // const [checkBoxSearch, setCheckBoxSearch] = useState("");
  const [itemChecked, setItemChecked] = useState(true);

  const checkItem = (e) => {
    setItemChecked((itemChecked) => !itemChecked);
    if (itemChecked) {
      //WHY WONT MY CHECKBOX PUSH ALL CHECKED ITEMS?
      setCheckBoxSearch([...checkBoxSearch, e.target.name]);
      // setCheckBoxSearch(e.target.name);
    } else {
      setCheckBoxSearch("");
    }
    console.log(checkBoxSearch);
  };

  return (
    <div className="App">
      <input
        type="checkbox"
        name="title 1"
        value="title 1"
        onChange={(e) => {
          checkItem(e);
        }}
      ></input>
      <label>title 1</label>
      <input
        type="checkbox"
        name="title 2"
        value="title 2"
        onChange={(e) => {
          checkItem(e);
        }}
      ></input>
      <label>title 2</label>

      <div className="itemsWrapper">
        {data
          .filter((value) => {
            if (value.name === "") {
              return value;
            } else if (value.name.includes(checkBoxSearch)) {
              return value;
            }
          })
          .map((dataItem) => {
            return (
              <div key={dataItem.name} className="items">
                {dataItem.name}
              </div>
            );
          })}
      </div>
    </div>
  );
}

Here is a working codesandbox if needed: https://codesandbox.io/s/intelligent-cdn-ime2oe?file=/src/App.js

CodePudding user response：

Your

const [itemChecked, setItemChecked] = useState(true);

is shared by the whole component. If you want each checkbox to have its own state that the displayed divs reflect later, use an array of state instead for the checkboxes.

const values = ['title 1', 'title 2'];
function App() {
  const data = [
    { name: "title 1" },
    { name: "title 2" },
    { name: "title 3" },
    { name: "title 4" },
    { name: "title 5" }
  ];
  const [valuesToSearchFor, setValuesToSearchFor] = React.useState([]);
  return (
    <div className="App">
      {
        values.map(value => (
          <React.Fragment>
          <input
            type="checkbox"
            name={value}
            value={value}
            onChange={() => {
              setValuesToSearchFor(
                valuesToSearchFor.includes(value)
                  ? valuesToSearchFor.filter(val => val !== value)
                  : [...valuesToSearchFor, value]
              );
            }}
          ></input>
          <label>{value}</label>
          </React.Fragment>
        ))
      }
      <div className="itemsWrapper">
        {data
          .filter(value => !valuesToSearchFor.length || valuesToSearchFor.includes(value.name))
          .map((dataItem) => {
            return (
              <div key={dataItem.name} className="items">
                {dataItem.name}
              </div>
            );
          })}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>