title: I want to modify the values ​in the table in React
body: <p>I want to make changes through the event so that the user can directly modify the values ​​in the table.
  The current data is linked with MongoDB.
  However, if an onchange event occurs in the current TextField, its value will not change normally.
  How should we solve it?</p>
  
  <p>I tried to bind the event by declaring it as a function, not as a variable, but it was useless.</p>
  
  <pre><code>const handleChange = (e, name, i) =&gt; {
    const { value } = e.target;
    this.setState(state =&gt; ({
      data: state.data.map(
          (row, j) =&gt; (j === i ? { ...row, [name]: value } : row)
      )
    }));
  };
  
  const row = (
    x,
    i,
    header,
    startEditing,
    editIdx,
    handleChange,
    handleRemove,
    stopEditing
  ) =&gt; {
    let currentlyEditing = editIdx === i;
    return (
      &lt;TableRow key={`tr-${i}`} selectable= 'false'&gt;
        {header.map((y, k) =&gt; (
          &lt;CustomTableCell key={`trc-${k}`}&gt;
            {currentlyEditing ?
              &lt;TextField
                name={y.prop}
                onChange={e =&gt; handleChange(e, y.prop, i)}
                value={x[y.prop]}
              /&gt;
             :
              x[y.prop]
            }
          &lt;/CustomTableCell&gt;
        ))}
        &lt;CustomTableCell&gt;
          {currentlyEditing ? (
            &lt;CheckIcon onClick={() =&gt; stopEditing()} /&gt;
          ) : (
            &lt;EditIcon onClick={() =&gt; startEditing(i)} /&gt;
          )}
        &lt;/CustomTableCell&gt;
        &lt;CustomTableCell&gt;
          &lt;TrashIcon onClick={() =&gt; handleRemove(x)}/&gt;
        &lt;/CustomTableCell&gt;
      &lt;/TableRow&gt;
    );
  };
  </code></pre>
  
  <p>I think the code now seems to change the value of the array.
  However, data is passed from MongoDB to the object.
  So what if need to change the value of a field in that row in an object?</p>