hi guys i would like to ask about filter in react

Question

hi guys i click on checkbox and i didnot get value even i click to second checkbox i would like to know the problem to fixed it thanks.and when it filter i coming after i click to second checkbox input i tried to search about it but u didnot find the soultion. the problem is when i click checkbox value isnot comming i must click another time to appear the previous value.

import React, { useState } from "react";
import { Item } from "./Item";
export default function Products() {
  const [product, setproduct] = useState(Item);
  const [checkboxvalue, setcheckboxvalue] = useState([]);
  let arrproduct = product.map((el) => {
    return (
      <div className="col-lg-3 col-md-4">
        <div className="content bg-danger">
          <img src={el.img} className="w-100" style={{ height: "200px" }}></img>
          <div className="text p-5">
            <h5>name: {el.name}</h5>
            <h5>type: {el.type}</h5>
            <h5>color: {el.color}</h5>
            <h5>price: {el.price}</h5>
          </div>

     </div>
    );
  });


  function handlecheckbox(e) {
    const { value, checked } = e.target;

    if (checked) {
      setcheckboxvalue((pre) => [...pre, value]);
    } else {
      setcheckboxvalue((pre) => {
        return [...pre.filter((i) => i === value)];
      });
    }

   
    setproduct(
      Item.filter((i) => {
        return checkboxvalue.includes(i.color) || checkboxvalue.includes("all");
      })
    );
  }

  return (
    <div>
      <h1>products</h1>
      <div className="btn-container">
        <button
          onClick={() => {
            setproduct(Item);
          }}
        >
          All
        </button>
        <button
          onClick={() => {
            handlebtn("jeans");
          }}
        >
          Jeans
        </button>
        <button
          onClick={() => {
            handlebtn("t-shirt");
          }}
        >
          T-shirt
        </button>
        <button
          onClick={() => {
            handlebtn("shoes");
          }}
        >
          shoes
        </button>
        <button
          onClick={() => {
            handlebtn("jacket");
          }}
        >
          jacket
        </button>
      </div>
      <div className="checkbox-input">
        <label>
          <input type="checkbox" value="all" onChange={handlecheckbox} />
          All
        </label>
        <label>
          <input type="checkbox" value="blue" onChange={handlecheckbox} />
          Blue
        </label>
        <label>
          <input type="checkbox" value="black" onChange={handlecheckbox} />
          Black
        </label>
        <label>
          <input type="checkbox" value="white" onChange={handlecheckbox} />
          White
        </label>
        <label>
          <input type="checkbox" value="red" onChange={handlecheckbox} />
          Red
        </label>
      </div>
      <div className="container">
        <div className="row g-3">{arrproduct}</div>
      </div>
    </div>
  );
}

Answer 1

You have a classic error about fundametals of React and JavaScript.

  function handlecheckbox(e) {
    const { value, checked } = e.target;

    if (checked) {
      setcheckboxvalue((pre) => [...pre, value]);
    } else {
      setcheckboxvalue((pre) => {
        return [...pre.filter((i) => i === value)];
      });
    }

   
    setproduct(
      Item.filter((i) => {
        return checkboxvalue.includes(i.color) || checkboxvalue.includes("all");
      })
    );
  }

In JavaScript and React the setcheckboxvalue change the value for the next render. checkboxvalue don't appear magically as soon as you call setcheckboxvalue. State in React is updated when it renders the component, this is the time when new value is available.

To fix the issue you need to use the filter outside of handler. You don't need to change the state for setproduct. You're Items is static so you don't need that other useState at all. Add it later when you will need to modify it.

export default function Products() {
  const [checkboxvalue, setcheckboxvalue] = useState([]);

  const product = Item.filter((i) => {
     return checkboxvalue.includes(i.color) || checkboxvalue.includes("all");
  });

  let arrproduct = product.map((el) => {
    return (
      <div className="col-lg-3 col-md-4">
        <div className="content bg-danger">
          <img src={el.img} className="w-100" style={{ height: "200px" }}></img>
          <div className="text p-5">
            <h5>name: {el.name}</h5>
            <h5>type: {el.type}</h5>
            <h5>color: {el.color}</h5>
            <h5>price: {el.price}</h5>
          </div>

     </div>
    );
  });

  function handlecheckbox(e) {
    const { value, checked } = e.target;

    if (checked) {
      setcheckboxvalue((pre) => [...pre, value]);
    } else {
      setcheckboxvalue((pre) => {
        return [...pre.filter((i) => i === value)];
      });
    }

   
    setproduct(
      Item.filter((i) => {
        return checkboxvalue.includes(i.color) || checkboxvalue.includes("all");
      })
    );
  }