title: React not updating state with setState with Array of object
body: <p>I want to create this table shown in image below. When Click on edit button It should change to textfield and pressing on confirm button it should again transform to tr td tags.
  <br/>
  <a href="https://i.stack.imgur.com/bWLZ8.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/bWLZ8.gif" alt="enter image description here"></a>
  <br/>
  here is my code for the same. I have created Array of objects in which i have id property, name property  and value property. On edit button click, it should change to textfield and on confirm button click the value of textfield should update in array of objects.</p>
  
  <pre><code>import React, { useState } from "react";
  import style from "./css/Register.module.css";
  import { Table, Button, Icon, TextInput } from "react-materialize";
  
  const ManipulateRegister = () =&gt; {
    const [RegisterData, setRegisterData] = useState([
      {
        id: 0,
        name: "W Register",
        value: 0,
        isEdit: false,
      },
      {
        id: 1,
        name: "Z Register",
        value: 0,
        isEdit: false,
      },
      {
        id: 2,
        name: "B Register",
        value: 0,
        isEdit: false,
      },
      {
        id: 3,
        name: "C Register",
        value: 0,
        isEdit: false,
      },
    ]);
  
    const handleRegisterEditBtn = (register) =&gt; {
      var datas = RegisterData;
      datas.forEach((data) =&gt; {
        if (data.id === register.id) {
          data.isEdit = true;
        }
      });
      console.log(datas);
      setRegisterData(datas);
    };
  
    return (
      &lt;div className={style.addressWrapper}&gt;
        &lt;div className={style.addressTableWrapper}&gt;
          &lt;Table centered hoverable responsive striped&gt;
            &lt;thead className="orange lighten-2"&gt;
              &lt;tr&gt;
                &lt;th data-field="Namee"&gt;Register Name&lt;/th&gt;
                &lt;th data-field="value"&gt;Value&lt;/th&gt;
                &lt;th data-field="action"&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
              {RegisterData.map((register) =&gt; (
                &lt;tr&gt;
                  {register.isEdit ? (
                    &lt;div&gt;
                      &lt;TextInput type="number" placeholder="Enter Value" /&gt;
                      &lt;Button small waves style={{ margin: "20px" }}&gt;
                        Submit
                      &lt;/Button&gt;
                      &lt;Button small waves className="red lighten-2"&gt;
                        Cancel
                      &lt;/Button&gt;
                    &lt;/div&gt;
                  ) : (
                    &lt;React.Fragment&gt;
                      &lt;td&gt;{register.name}&lt;/td&gt;
                      &lt;td&gt;{register.value}&lt;/td&gt;
                      &lt;td&gt;
                        &lt;Button
                          floating
                          icon={&lt;Icon&gt;edit&lt;/Icon&gt;}
                          onClick={() =&gt; handleRegisterEditBtn(register)}
                        /&gt;
                      &lt;/td&gt;
                    &lt;/React.Fragment&gt;
                  )}
                &lt;/tr&gt;
              ))}
            &lt;/tbody&gt;
          &lt;/Table&gt;
        &lt;/div&gt;
        &lt;Button node="button" className="red lighten-1" waves="light"&gt;
          Reset
        &lt;/Button&gt;
      &lt;/div&gt;
    );
  };
  export default ManipulateRegister;
  
  
  </code></pre>