Update Object with an array using React States

Question

I have a state quiz and another one questionList and the following quiz structure is like this:

const [quiz, setQuiz] = useState({
        title: 'test',
        description: 'test',
        user_id: 'test',
        thumbnail: 'test',
        timer: 'test',
        question: []
    })

And somehow the structure of questionList is:

[{
   id: Math.floor(100000 + Math.random() * 900000),
   question: "data",
   answer1: "data",
   answer2: "data",
   answer3: "data",
   answer4: "data"
},
{
   id: Math.floor(100000 + Math.random() * 900000),
   question: "data",
   answer1: "data",
   answer2: "data",
   answer3: "data",
   answer4: "data"
}
]

So with a function, I'm filling the questionList but what I want to do is also beside that update (or replace) the question: [] with the new array from the questionList in the quiz state.

Here is how I add a question in the List:

const addQuestion = (question) => {
   setQuestionList([...questionList, question]);   
   // here the logic to update the property question on Quiz state with the new added object into questionList
};

So when a question is added to the list, that list array I want to update to questions: [], as an update, and not add another field.

Niyazi Ekinci · Accepted Answer · 2021-11-17 06:17:48Z

1

You can use useEffect hook with questionList state. And when questionList updated, this hook triggered and updates quiz state.

React.useEffect(()=>{
  setQuiz({...quiz, question: questionList})
}, [questionList]);

answered Nov 17, 2021 at 6:17

Niyazi Ekinci

871 silver badge9 bronze badges

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

Comments

salik saleem · Accepted Answer · 2021-11-17 06:18:52Z

So basically what i understand from your question .when new question added it should add in your questionList array. so in react we cannot directly mutate states. [1]: https://medium.com/@kkranthi438/dont-mutate-state-in-react-6b25d5e06f42 So in order to solve this we can

Create a new dummy object.

const addQuestion = (question) => {
let dummyObj={};//set all your properties here inside your question array also

copy existing array into dummy array
```
let dummyArr=[...existing array];
```

push object or other values in this array

dummmyArr.push(dummyObj);//push only work here not for pushing into setState

now put this mutated array into your setState .
```
setQuestionList(dummyArr)
};
```

now this method is also suitable if you want to set nested data like youyr question array.

salik saleem · Accepted Answer · 2021-11-17 06:21:19Z

1

Another solution you can use useEffect for that purpose 1- use Dependency array of useEffect .Every time state of question list change .this will automatically trigger the useEffect.

answered Nov 17, 2021 at 6:21

salik saleem

8677 silver badges27 bronze badges

1 Comment

jerek.orlin Over a year ago

yes thats a way too

Ashish Kamble · Accepted Answer · 2021-11-17 06:21:48Z

0

you can do this in your function, replace your old function,

const addQuestion = (question) => {
   setQuestionList([...questionList, question]); 
};

to this, this will work

const addQuestion = (question) => {
   setQuestionList([...questionList, question]);   
   setQuiz({...quiz, question: [...questionList, question]})
};

answered Nov 17, 2021 at 6:21

Ashish Kamble

2,8254 gold badges23 silver badges30 bronze badges

Comments

Sergei Klinov · Accepted Answer · 2021-11-17 06:38:08Z

0

Yeah, you're almost there, just need to update your questionList first and then quiz.

Notice the callback style of setting state.

const addQuestion = (question) => {
   setQuestionList(prevQuestionList => [...prevQuestionList, question]);   
};

and later add reaction to questionList changing

useEffect(() => {
   setQuiz(prevQuiz => ({...prevQuiz, question: questionList}))
}, [questionList])

answered Nov 17, 2021 at 6:38

Sergei Klinov

8084 gold badges14 silver badges29 bronze badges

Collectives™ on Stack Overflow

Update Object with an array using React States

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related