I'm not able to select checkboxes. Do you see what's wrong please ?

export default function Filters() {
  const category = [{ name: "beaf" },{ name: "chicken" }, { name: "vegetables" },];

  const [cat, setCat] = useState([]);
  useEffect(() => {
    setCat(category);
  }, []);

  const handleChangeC = (e) => {
    const { name, checked } = e.target;
    let tempC = norms.map((c) =>
      c.name === name ? { ...c, isChecked: checked } : c
    );
    setNorms(tempC);
  };
  return (
    <div className="flex flex-col ">
      <div className="mt-3 h-6 text-xs font-bold uppercase leading-8 text-gray-500">
        Filters
      </div>
      <form className="mx-2 w-full flex-1">
        <tbody className=" bg-white my-2 p-1 flex borer border-gray-200 rounded text-gray-500">
          {cat.map((e, index) => (
            <div className="form-check mx-2" key={index}>
              <tr>
                <td>
                  <input
                    type="checkbox"
                    className="form-check-input"
                    name={e.name}
                    checked={e?.isChecked || false}
                    onChange={handleChangeC}
                  />
                  <label>{e.name}</label>
                </td>
              </tr>
            </div>
          ))}
        </tbody>
      </form>
    </div>
  );
}

CodePudding user response：

There are few issues on your functional component.

1. Add the right dependencies in useEffect hook.

useEffect(() => {
    setCat(category);
  }, []);

// category should be added as a dependecies
useEffect(() => {
    setCat(category);
  }, [category]);

But you defined category as a constant. So actually your code doesn't make sense and the following code is correct in your case.

const category = [{ name: "beaf" }, { name: "chicken" }, { name: "vegetables" }];
const [cat, setCat] = useState(category);

// Should be removed.
/*useEffect(() => {
    setCat(category);
  }, []);*/

2. use setState hook correctly.

You are changing norms state value based on its previous value.

const handleChangeC = (e) => {
    const { name, checked } = e.target;
    let tempC = norms.map((c) =>
      c.name === name ? { ...c, isChecked: checked } : c
    );
    setNorms(tempC);
  };

In this case, you should use previous state like follows.

const handleChangeC = (e) => {
    const { name, checked } = e.target;    
    setNorms(prevNorms => (prevNorms.map((c) => c.name === name ? { ...c, isChecked: checked } : c));
  };

CodePudding user response：

There were few issues with your code. This code is working on mine unless you want to do in a different way. Your logic seems fine but just the way of implementing it.

• Import required dependencies
• Use state to re set the state value

function Filters() {
    const category = [
        { name: 'beaf' },
        { name: 'chicken' },
        { name: 'vegetables' },
    ];

    const [cat, setCat] = useState([]);

    useEffect(() => {
        setCat(category);
    }, []);

    const handleChangeR = (e) => {
        const { name, checked } = e.target;
        const tempC = cat.map((c) => (c.name === name ? { ...c, isChecked: checked } : c));
        setCat(tempC);
    };
    return (
        <div className="flex flex-col ">
            <div className="mt-3 h-6 text-xs font-bold uppercase leading-8 text-gray-500">
          Filters
            </div>
            <form className="mx-2 w-full flex-1">
                <tbody className=" bg-white my-2 p-1 flex borer border-gray-200 rounded text-gray-500">
                    {cat.map((e, index) => (
                        <div className="form-check mx-2" key={index}>
                            <tr>
                                <td>
                                    <input
                                        type="checkbox"
                                        className="form-check-input"
                                        name={e.name}
                                        checked={e?.isChecked || false}
                                        onChange={handleChangeR}
                                    />
                                    <label>{e.name}</label>
                                </td>
                            </tr>
                        </div>
                    ))}
                </tbody>
            </form>
        </div>
    );
}