Update specific value in array of objects in state using React

Question

I'm trying to update checked property in list of todos array whenever an item is checked.

How do I update a specific item at that particular index.

For example,

[{name: 'todo1', checked: false},{name: 'todo2', checked: false}]

When I checked todo2, the updated array should be

[{name: 'todo1', checked: false},{name: 'todo2', checked: true}]

Code

  const [todos, setTodos] = useState([]);
  const [checked, setChecked] = useState(false);
  const handleChange = (event, index) => {
    console.log("index", index);
    setChecked(event.target.checked);
  };
  console.log(todos);
  return (
    <>
      {todos.map(
        (item, index) =>
          item.name && (
            <div key={index}>
              <Checkbox onChange={(e) => handleChange(e, index)} />
              {item.name}
            </div>
          )
      )}
      <Formik
        initialValues={{
          todo: ""
        }}
        onSubmit={(values, { resetForm }) => {
          setTodos([...todos, { name: values.todo, checked: checked }]);
          resetForm({ values: "" });
        }}
      >
        <Form>
          <label htmlFor="todo"></label>
          <Field id="todo" name="todo" placeholder="item" />
          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </>
  );
}

I created a working example using CodeSandbox. Could anyone please help?

Ketan Ramteke · Accepted Answer · 2020-11-19 21:04:50Z

1

Here is how you can toggle the checked value.


const handleChange = (event, index) => {
    console.log("index", index);
    let temp = [...todos];
    temp[index]["checked"] = !temp[index]["checked"];
    setChecked(temp);
    console.log(todos);
  };

Output:

Codesandbox Link

edited Nov 19, 2020 at 21:04

answered Nov 19, 2020 at 20:58

Ketan Ramteke

10.7k2 gold badges27 silver badges46 bronze badges

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

2 Comments

krsna Over a year ago

This is great!!

Ketan Ramteke Over a year ago

Glad it helped, happy coding :)

Hamza Khattabi · Accepted Answer · 2020-11-19 21:02:36Z

0

here is the best way to do it with good practice on immutable state :

const handleChange = (event, index) => {
   const updatedTodos = todos.map((todo, todoIndex) => index === todoIndex ? {...todo, checked: true} : todo )
   setState(updatedTodos)
};

answered Nov 19, 2020 at 21:02

Hamza Khattabi

6846 silver badges12 bronze badges

Collectives™ on Stack Overflow

Update specific value in array of objects in state using React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related