How to create nested array of objects using useState react hook

Question

I have a problem finding a solution on how to fill empty nested array by using the useState hook. I'm a react beginner and I have might miss something. In steps below I shall try to summarize the problem.

1.) I receive this data format as props - {question}:

{
  category: "General Knowledge"
  correct_answer: "Arby's"
  difficulty: "easy"
  incorrect_answers: (3) ['McDonald's', 'Burger King', 'Wendy's']
  question: "In which fast food chain can you order a Jamocha Shake?"
  type: "multiple"
}

2. What my goal output is ty create an object with this structure:

  value: "Opel",
  isClicked: false,
  isCorrect: true,
  incorrect_answers: [
    {isClicked: false, value: "Bugatti"},
    {isClicked: false, value: "Bentley},
    {etc...}
  ]

3. With this approach I achieve the result, but I would like to find a more correct react way.

useEffect(() => {

      const obj = {
        value: question.correct_answer, 
        isClicked: false, 
        isCorrect: true, 
        incorrect_answers: []
      }

      question.incorrect_answers.map((item) => 
      obj.incorrect_answers.push({
        value: item,
        isClicked: false,
      })
    )

    setAnswers(obj) 

    }, [])

4. My goal is to have mentioned data structure formed in useState with the right approach on how to access nested arr and fill it with objects.

a) I use the useState for setting up state and its data structure for answers obj.

 const [answers, setAnswers] = useState({
  value: question.correct_answer, 
  isClicked: false, 
  isCorrect: true, 
  incorrect_answers: [
    //I want multiple objects {value: '...', isClicked: ...},
    // Would be nice if I was able to insert objects in this a) step.
  ]
 })

b) Perhaps on the useEffect or on some other funcion I want to fill incorect_answers array with objects.

useEffect(() => { 

  // c) Im accesing the answers state and filling incorect_answers with obj

      setAnswers(prevState =>  { 
        return {
          ...prevState,
          incorrect_answers: [{
            value: question.incorrect_answers.map((item) => item),
            isClicked: false,
            isCorrect: false
          }]

        }
     
      })

 // d) my output:

/* {
  value: "Opel",
  isClicked: false,
  isCorrect: true,
  incorrect_answers: [
    {isClicked: false, value: [bugatti, bentley, bmw, citroen]},
  ]

} */
  

 }, [])

Answer 1

If you're using map you shouldnt ignore the response from it, and you don't need to push to the array

useEffect(() => {

  const obj = {
    value: question.correct_answer, 
    isClicked: false, 
    isCorrect: true, 
    incorrect_answers: question.incorrect_answers.map(item => ({ 
        value: item,
        isClicked: false
    }))
  }

  setAnswers(obj) 

}, [])

The same method can be used when first filling your state

const [answers, setAnswers] = useState({
  value: question.correct_answer, 
  isClicked: false, 
  isCorrect: true, 
  incorrect_answers: question.incorrect_answers.map(item => ({ 
            value: item,
            isClicked: false
        }))
 })