title: How to properly update an array inside a react hook state
body: <p>i've been trying to update the object inside an array that respresents a react state, the object should be updated when the value of an input is changed, I could find a way myself to update it, but i'm not sure enough that it is the proper way to do it because when i open the react dev tools and go to the components tab and click the component that i'm working on, the state doesn't update immidiatly when typing in the input, and in order to see the change i have to click on another component in the dev tool and then go back to the first component and the change is done.</p>
  
  <p>So I'm basically asking if the way i used to update the state is correct and to get some suggestions about better ways to do it so it updates instantly. Thanks</p>
  
  <p>here is the code</p>
  
  <p>the state:</p>
  
  <pre class="lang-js prettyprint-override"><code>const [items, setItems] = useState([{ name: "", quantity: "", unit: "" }]);
  </code></pre>
  
  <p>the change handling function (the function that updates the state):</p>
  
  <pre class="lang-js prettyprint-override"><code>const nameChange = (e, i) =&gt; {
    const newItems = items;
    newItems[i].name = e.target.value;
    setItems(newItems);
    console.log(items);
  };
  </code></pre>
  
  <p>the inputs:</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    items.map((item, i) =&gt; {
      return (
        &lt;div key={i} className={`mt3 ${classes.root}`}&gt;
          &lt;TextField
            onChange={e =&gt; nameChange(e, i)}
            style={{ width: "30%" }}
            id="standard-basic"
            label="Item name"
          /&gt;
          &lt;TextField
            style={{ width: "25%" }}
            id="standard-basic"
            label="quantity"
          /&gt;
          &lt;TextField
            style={{ width: "10%" }}
            id="standard-basic"
            label="Unit"
          /&gt;
        &lt;/div&gt;
      );
    });
  }
  </code></pre>