Changing part of state

Question

Have a little problem with my useState Hook. I want to change only "answer".

const [questions, setQuestions] = useState({
    question1: { answer: "1", isCorrect: false },
    question2: { answer: "1", isCorrect: false },
    question3: { answer: "1", isCorrect: false },
    question4: { answer: "1", isCorrect: false }
  });

const onChange = e => {
    setQuestions({
      ...questions,
      [e.target.name]: { answer: e.target.value }
    });
  };

This function works, but isCorrect disappear.

I know I can use [e.target.name]: { answer: e.target.value, isCorrect: false} but I want a previous state. ...isCorrect doesn't work. It shoud be so easy but I cant find solucion. I wish someone can help me with that.

`[e.target.name]: { ...questions[e.target.name], answer: e.target.value }` — Emile Bergeron, Nov 05 '19 at 18:26
Does this answer your question? [How to update nested state properties in React](https://stackoverflow.com/questions/43040721/how-to-update-nested-state-properties-in-react) — Emile Bergeron, Nov 05 '19 at 18:27
This is because you are replacing the `questionN` object with a new object. BTW, if you are using numbers on your key names, you should most likely use an array instead of an object. — Code-Apprentice, Nov 05 '19 at 18:30

score 3 · Answer 1 · answered Nov 05 '19 at 18:26

3

spread the original object and overwrite answer

   const onChange = e => {
    setQuestions({
      ...questions,
      [e.target.name]: { ...questions[e.target.name], answer: e.target.value }
    });
  };

answered Nov 05 '19 at 18:26

Dupocas

20,285
6
38
56

Shubham Khatri · Accepted Answer · 2019-11-05T18:29:21.320

3

You need to use spread syntax for the nested values too and override the answer key

const onChange = e => {
    setQuestions({
      ...questions,
      [e.target.name]: { ...questions[e.target.name], answer: e.target.value }
    });
  };

edited Nov 05 '19 at 18:29

answered Nov 05 '19 at 18:26

Shubham Khatri

270,417
55
406
400

Changing part of state

2 Answers2