Update Object with an array using React States-CodePudding

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.

CodePudding user response：

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]})
};

CodePudding user response：

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]);

CodePudding user response：

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.

CodePudding user response：

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.

CodePudding user response：

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])