title: React : Set state of array in object
body: <p><strong>Problem</strong></p>
  <hr />
  <p>Lets assume I have the following React component. It contains an object as an state. This object in turn has an array in it.</p>
  <p><strong>My goal</strong> is to update this state.</p>
  <pre><code>export default class Parent extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
  
        contactFields: {
          opsAreaCode: &quot;&quot;,
          instructions: &quot;&quot;,
          contact: [
            {
              email: &quot;&quot;,
              phone: &quot;&quot;,
              type: &quot;&quot;,
            }
          ]
        }
  }
  </code></pre>
  <p><strong>My current solution</strong>
  Does not work.</p>
  <pre><code>this.setState(
    (prevState) =&gt; ({
      contactFields: {
        ...prevState.contactFields,
        contact[0]: { email: value },
      },
    })
  </code></pre>
  <p>);</p>
  <p>contact[0] =&gt; Does not work? How can I access the index of an array? And how do i add a whole new input to that array?</p>