Add object to end of array react

Question

I have a bit of a problem with building an object in my Next.JS application. And it's most likely because of my lacking JavaScript and React competences. I have a form that is rendered from an api call. It returns an array of objects like so:

[
  {
    "formId": "uuid",
    "description": "Description of form",
    "questions": [
        {
            "questionId": "uuid",
            "text": "question 1?",
            "alternatives": [
                {
                    "text": "No",
                    "ratingValue": 1
                },
                {
                    "text": "Yes",
                    "ratingValue": 5
                }
            ]
        }
     ]
}]

The object will contain multiple forms and each form can contain multiple questions. I pass the value of each question into a function called pushAnswer in my component like this:

<Form.Check
  type="radio"
  name={question.questionId}
  value={alternative.ratingValue}
  onChange={event => { 
    pushAnswer(form.formId, question.questionId, event.target.value)
}} />

I have state variable const [formBody, setFormBody] = useState({form:[]}) And the pushAnswer function looks like this:

 const pushAnswer = (formId, questionId, answerValue) => {
      const currentForm = formBody; 
      let answeredForm = currentForm.forms.find(form => form.formId === formId);

      // if the form ID doesn't exist, add it
      if (!answeredForm) {
        answeredForm = {
          formId,
          answers: []
        } 
      } 

      // check if the questionId exists
      let answeredQuestion = answeredForm.answers.find(answer => answer.questionId === questionId)

      if (!answeredQuestion) {
        answeredQuestion = {
          questionId,
          rating: answerValue
        }
      }

      answeredQuestion.rating = answerValue;

      setFormBody(oldForm => ({
        ...oldForm,
        forms: [
          {
            formId: answeredForm.formId,
            questions: [
              {
                questionId: answeredQuestion.questionId,
                rating: answeredQuestion.rating
              }
            ]
          }
        ]
      }))  
  }

I want to produce an answer like this:

{
  "forms": [
    {
      "formId": "2b945644-a9c3-473e-afac-1236bc1575ce",
      "questions": [
        {
          "questionId": "289a9e8a-a607-464a-8939-48223819f413",
          "rating": "1"
        },
        {
          "questionId": "another uuid",
          "rating": "5"
        }
      ]
    },
    {
      "formId": "another uuid",
      "questions": [
        {
          "questionId": "another uuid",
          "rating": "5"
        }
      ]
    }
  ]
}

The first question gets added to formBody, but when I try to get the values of another question I get an error at let answeredQuestion = answeredForm.answers.find(answer => answer.questionId === questionId) that says Cannot read property 'find' of undefined .

Can anyone advice how I can solve this?

Answer 1

You are not saving the correct value in the state, it should be

      const [formBody, setFormBody] = useState({forms:[]})


      setFormBody(oldForm => ({forms: [
        ...oldForm.forms,
        [
          {
            formId: answeredForm.formId,
            questions: [
              {
                questionId: answeredQuestion.questionId,
                rating: answeredQuestion.rating
              }
            ]
          }
        ]
      ]}))