React hooks add mapped checkbox values to array or remove it

Question

I tried some solutions on the net but cant fix it so i need to ask. I have checkboxes which is mapped in render. I want to add the values of the checkboxes to array state if checked or remove the value if unchecked. Thanks for helps Things i tried ;

My jsx ;

{props.edit && <input type="checkbox" value={props.id} onChange={(e) => setDeleteId(e)}/>}

Functions ;

  const [deleteId, setdeleteId] = useState([]);

  const setDeleteId = (e) => {
    setdeleteId([...deleteId, e.target.value]);
  }

  useEffect(() => {
    console.log(deleteId);
  }, [deleteId])

You say "checkboxes" but then your code only has one checkbox. Can you post a codesandbox that demos the issue? — Chris Farmer
– Chris Farmer, Commented Jul 8, 2021 at 21:34
Its in a array map. So there are multiple checkboxes. Sorry for uncomplete code. — Gunsela
– Gunsela, Commented Jul 8, 2021 at 21:44

gerrod · Accepted Answer · 2021-07-08 21:54:10Z

3

Your event handler looks like it's always just adding the checkbox id to the state - you need to also remove it when the checkbox gets unchecked, e.g. -

const [selected, setSelected] = useState([]);

const handleChange = event => {
    const { checked, value } = event.currentTarget;

    setSelected(
      prev => checked
        ? [...prev, value]
        : prev.filter(val => val !== value)
    );
};

Here is a demo on StackBlitz showing how it all fits together.

answered Jul 8, 2021 at 21:54

gerrod

6,7276 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React hooks add mapped checkbox values to array or remove it

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related