title: React hooks: How do I update state on a nested object with array with useState()?
body: <p>I have this form with questions and answers i get from the backend like this:</p>
  <pre><code>{
    &quot;id&quot;: 0,
    &quot;seq&quot;: 0,
    &quot;ccid&quot;: &quot;string&quot;,
    &quot;topic&quot;: &quot;string&quot;,
    &quot;riskOutcome&quot;: &quot;string&quot;,
    &quot;condition&quot;: &quot;string&quot;,
    &quot;comment&quot;: &quot;string&quot;,
    &quot;visible&quot;: true,
    &quot;created&quot;: &quot;2021-10-14T14:12:48.911Z&quot;,
    &quot;updated&quot;: &quot;2021-10-14T14:12:48.911Z&quot;,
    &quot;createdById&quot;: 0,
    &quot;updatedById&quot;: 0,
    &quot;parentContentTypeId&quot;: 0,
    &quot;questionTypeId&quot;: 0,
    &quot;subContentTypes&quot;: [
      {
        &quot;id&quot;: 0,
        &quot;seq&quot;: 0,
        &quot;ccid&quot;: &quot;string&quot;,
        &quot;type&quot;: &quot;string&quot;,
        &quot;topic&quot;: &quot;string&quot;,
        &quot;riskOutcome&quot;: &quot;string&quot;,
        &quot;condition&quot;: &quot;string&quot;,
        &quot;comment&quot;: &quot;string&quot;,
        &quot;visible&quot;: true,
        &quot;created&quot;: &quot;2021-10-14T14:12:48.911Z&quot;,
        &quot;updated&quot;: &quot;2021-10-14T14:12:48.911Z&quot;,
        &quot;createdById&quot;: 0,
        &quot;updatedById&quot;: 0,
        &quot;parentContentTypeId&quot;: 0,
        &quot;subContentTypes&quot;: [
          null
        ],
        &quot;textI18Ns&quot;: [
          {
            &quot;id&quot;: 0,
            &quot;text&quot;: &quot;string&quot;,
            &quot;languageCode&quot;: &quot;string&quot;,
            &quot;type&quot;: &quot;string&quot;,
            &quot;contentTypeId&quot;: 0
          }
        ]
      }
    ],
    &quot;textI18Ns&quot;: [
      {
        &quot;id&quot;: 0,
        &quot;text&quot;: &quot;string&quot;,
        &quot;languageCode&quot;: &quot;string&quot;,
        &quot;type&quot;: &quot;string&quot;,
        &quot;contentTypeId&quot;: 0
      }
    ]
  }
  </code></pre>
  <p>in the subContentTypes Array are the answers and within textI18Ns is the text for the answers that is shown.</p>
  <p>I seperate the answers from the question with this</p>
  <pre><code>const [answerData, setAnswerData] = useState();
  
  function getDatafromBackend = () =&gt;{
              dispatch(getOneQuestion(data))
              .unwrap()
              .then((originalPromiseResult) =&gt; {
                  var options = {};
                  Object.entries(originalPromiseResult.subContentTypes).map(([key, value]) =&gt;   {
                      options[key] = value;
                  })  
                  console.log(&quot;answertdata &quot;, options)
  
                  setAnswerData(options);
                 }
  }
  </code></pre>
  <p>Now what I want to do is, to edit a Text from the Answer State.
  My JSX looks like this:</p>
  <pre><code>let datalist = Object.entries(answerData).map(([key, value]) =&gt; {
  return (&lt;Paper elevation={3} style={{ margin: 10 }} key={&quot;answerlist&quot;+key}&gt;
                      &lt;Typography style={{ margin: 10}}&gt;{&quot;Daten zur Antwort: &quot;}{answerData[key].ccid} &lt;/Typography&gt;
                      {
                          Object.entries(answerData[key].textI18Ns).map(([index,value]) =&gt;{
                              return (
                                  &lt;Paper elevation={3} style={{ margin: 10}} key={&quot;questiontext&quot;+index}&gt;
                                      &lt;TextField label={&quot;Text ID&quot;} disabled className=&quot;QuestionDataField&quot; value={answerData[key].textI18Ns[index].id} fullWidth&gt;&lt;/TextField&gt;&lt;br /&gt;
                                      &lt;TextField label={&quot;Content Typ ID&quot;} disabled className=&quot;QuestionDataField&quot; value={answerData[key].textI18Ns[index].contentTypeId} fullWidth&gt;&lt;/TextField&gt;&lt;br /&gt;
                                      &lt;TextField label={&quot;Typ&quot;} className=&quot;QuestionDataField&quot; value={answerData[key].textI18Ns[index].type} fullWidth onChange={(event) =&gt; { updateAnswerTexts(event, 'type', key, index) }}&gt;&lt;/TextField&gt;&lt;br /&gt;
                                      &lt;TextField label={&quot;Text&quot;} multiline className=&quot;QuestionDataField&quot; value={answerData[key].textI18Ns[index].text} fullWidth onChange={(event) =&gt; { updateAnswerTexts(event, 'text',key, index) }}&gt;&lt;/TextField&gt;&lt;br /&gt;
                                      &lt;TextField label={&quot;Sprache&quot;} className=&quot;QuestionDataField&quot; value={answerData[key].textI18Ns[index].languageCode} fullWidth onChange={(event) =&gt; { updateAnswerTexts(event, 'languageCode', key, index) }}&gt;&lt;/TextField&gt;&lt;br /&gt;
                                      &lt;Divider/&gt;
                                  &lt;/Paper&gt;
                              )
                          })
                      )}
  setTableBody(datalist)
  
  </code></pre>
  <p>Here is the Problem. What i tried: Make a copy, change it and set the changed object</p>
  <pre><code>    const updateAnswerTexts = (event,prop,key, index) =&gt;{
          let oldstate = answerData[index].textI18Ns[key];
          let updatedstate = {...oldstate, [prop]: event.target.value};
          let newstatetexts =  Object.assign({}, answerData);
  
  
  
          //Here is the Problem. Console says &quot;Uncaught TypeError: 0 is read-only setSTate&quot;
          newstatetexts[index].textI18Ns[key] = updatedstate;
          setAnswerData(newstatetexts)
  
          setAnswerData((prevState) =&gt; {
              prevState[index].textI18Ns[key] = updatedstate;
              return({
                  ...prevState
              })
          })
      }
  }
  </code></pre>
  <p>Another try: Here the Console says, [prop] is read only</p>
  <pre><code>    const updateAnswerTexts = (event,prop,key, index) =&gt;{
         
           setAnswerData((prevState) =&gt; {
               prevState[index].textI18Ns[key][prop] = event.target.value;
               return({
                   ...prevState
               })
           })
      }
  </code></pre>
  <p>Another try: Here the Console says, [prop] is read only too</p>
  <pre><code>    const updateAnswerTexts = (event,prop,key, index) =&gt;{
          let oldstate = answerData[index].textI18Ns[key];
          let updatedstate = {...oldstate, [prop]: event.target.value};
          setAnswerData((prevState) =&gt; {
              prevState[index].textI18Ns[key] = updatedstate;
              return({
                  ...prevState
              })
          })
      }
  </code></pre>