How to add/remove items in a state in react based on a toggle?

I have a requirement to show products based on the checkbox toggles. If none is toggled, the array should be empty. If the men’s checkbox is toggled, men-related products will be shown, and the same for the women’s checkbox. If both are toggled, both related products will be shown. When the user is toggling men or women, the respective products are shown/hidden correctly, but something is messing up when toggling both men and women and getting a lot of console warnings related to react key. This is what I have tried so far.

const root = ReactDOM.createRoot(document.getElementById("root"))

const initialArray = [
  {
    title: "Belts",
    for: "men"
  },
  {
    title: "Makeup",
    for: "women"
  }
];

function App() {
  const [menToggle, setMenToggle] = React.useState(false);
  const [womenToggle, setWomenToggle] = React.useState(false);
  const [products, setProducts] = React.useState([]);

  React.useEffect(() => {
    if (menToggle) {
      setProducts((prev) => [
        ...prev,
        ...initialArray.filter((item) => item.for === "men")
      ]);
    }
    if (!menToggle) {
      setProducts((prev) => [...prev.filter((item) => item.for !== "men")]);
    }
    if (womenToggle) {
      setProducts((prev) => [
        ...prev,
        ...initialArray.filter((item) => item.for === "women")
      ]);
    }
    if (!womenToggle) {
      setProducts((prev) => [...prev.filter((item) => item.for !== "women")]);
    }
  }, [menToggle, womenToggle]);

  return (
    <div className="App">
      <label>
        <input
          type="checkbox"
          checked={menToggle}
          onChange={() => setMenToggle((prevValue) => !prevValue)}
        />
        Men
      </label>
      <label>
        <input
          type="checkbox"
          checked={womenToggle}
          onChange={() => setWomenToggle((prevValue) => !prevValue)}
        />
        Women
      </label>
      <div>
        {products &&
          products.length > 0 &&
          products.map((item) => <li key={item.title}>{item.title}</li>)}
      </div>
    </div>
  );
}


root.render(<App />)

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

<div id="root"></div>

Thanks in advance

Answer

I think you don’t need to set the product’s state every time the user changes the active filters because you can derive that value from the state. Also, I’d prefer to create a list of active filters rather than having each one in separated states. These filters tend to scale, and breaking them down can be hard to manage.

I came up with two solutions, one using Array and a “nicer” one using Set.

Array: https://codesandbox.io/s/sparkling-shape-inevid

Set: https://codesandbox.io/s/confident-paper-mdw44m

Advertisement

Answer