title: Onchange is not working when editing cell of material-table in react.js
body: <p>how can I make an editable cell in React with Material-UI? I'm trying to make cell editable in material UI table but when I pass inputChangeHandler to onChange method it doesn't work as expected, the text just adds to the new row.</p>
  
  <p>snapshot:
  <a href="https://i.stack.imgur.com/mtjRs.png" rel="nofollow noreferrer">the edited data shifted to the new table row</a></p>
  
  <p>I am using react-hooks useState to store the initial state. </p>
  
  <p>code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const MyForm = () =&gt; {
    const [data, setdata] = useState([
      {
        id: 1,
        name: "Frozen yoghurt",
        calories: 159,
        fat: 6.0,
        carbs: 24,
        protein: 4.0,
      },
      {
        id: 2,
        name: "Ice cream sandwich",
        calories: 237,
        fat: 9.0,
        carbs: 37,
        protein: 4.3,
        
      },
      { id: 3, name: "Eclair", calories: 300, fat: 7.0, carbs: 67, protein: 4 },
      {
        id: 4,
        name: "Velvet cake",
        calories: 237,
        fat: 2.5,
        carbs: 17,
        protein: 3,
      }
    ]);
  
   
    const [editingIndex, setEditingIndex] = useState(-1);
  
  
  
    const addNewUserHandler = () =&gt; {
      let newData = [{
        id: "",
        name: "",
        calories: "",
        fat: "",
        carbs: "",
        protein: ""
      }];
      const Data = data;
      // Data.push(newData)
      console.log(newData)
      setdata([...Data, newData])
   
    };
  
    const addNewData = e =&gt; {
      console.log(e);
    };
  
    // const editDataHandler = id =&gt; {
    //   // console.log(id);
    //   // setEditing(true)
    //     setEditingIndex(id)
    // };
  
    const startEditing = i =&gt; {
      setEditingIndex(i);
    };
  
    const stopEditing = () =&gt; {
      setEditingIndex(-1);
    };
  
    const inputChangeHandler = (e) =&gt; {
      // e.persist();
      // console.log(id, e.target.value, "e,target");
      setdata([{[e.target.name]: e.target.value}])
  
    };
  
    const submitInputHandler = (e) =&gt; {
      e.persist();
      console.log("this is the input change handler", e.target.value);
    };
  
    const deleteRowHandler = id =&gt; {
      const temp = [...data];
      const filteredData = temp.filter(data =&gt; data.id !== id);
      setdata([...filteredData,]);
    };
  
    const classes = useStyles();
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;Paper className={classes.paper}&gt;
          &lt;Table className={classes.table} size="small"&gt;
            &lt;TableHead&gt;
              &lt;TableRow&gt;
                &lt;TableCell&gt;Id.&lt;/TableCell&gt;
                &lt;TableCell&gt;Dessert (100g serving)&lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;Calories&lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;Fat&amp;nbsp;(g)&lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;Carbs&amp;nbsp;(g)&lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;Protein&amp;nbsp;(g)&lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;
                  &lt;InputBase
                    placeholder="search"
                    inputProps={{ "aria-label": "search" }}
                    style={{ verticalAlign: "middle" }}
                  /&gt;
                  &lt;SearchIcon style={{ verticalAlign: "middle" }} /&gt;
                &lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;
                  &lt;Tooltip title="Add data" aria-label="add"&gt;
                    &lt;Fab
                      color="primary"
                      className={classes.fab}
                      onClick={addNewUserHandler}
                    &gt;
                      &lt;AddIcon /&gt;
                    &lt;/Fab&gt;
                  &lt;/Tooltip&gt;
                &lt;/TableCell&gt;
              &lt;/TableRow&gt;
            &lt;/TableHead&gt;
  
            &lt;TableBody&gt;
              {data.map((data, id) =&gt; (
                &lt;TableRow key={id}&gt;
                    {editingIndex === data.id ? (
                  &lt;TableCell component="th" scope="row"&gt;
                      &lt;TextField
                        style={{ width: "3rem" }}
                        name="id"
                        onChange={(e) =&gt;inputChangeHandler(e)}
                        value={id+1}
                      /&gt;
                      &lt;/TableCell&gt;
                    ) : 
                    (
                    &lt;TableCell component="th" scope="row"&gt;
                     {id+1}
                  &lt;/TableCell&gt;
                  
                    )}
                    {editingIndex === data.id ? (
                      &lt;TableCell&gt;
                        &lt;TextField
                      style={{ width: "8rem" }}
                      onChange={(e) =&gt;inputChangeHandler(e)}
                      name="name"
                      value={data.name}
                      /&gt;
                      &lt;/TableCell&gt;
                      
                    ) : (
                      &lt;TableCell style={{ textAlign: "center" }}&gt;
                      {data.name}
                  &lt;/TableCell&gt;
                    )}
                    {editingIndex === data.id ? (
                  &lt;TableCell align="center"&gt;
                      &lt;TextField
                        style={{ width: "8rem" }}
                        onChange={(e) =&gt;inputChangeHandler(e)}
                        name="calories"
                        value={data.calories}
                        /&gt;
                        &lt;/TableCell&gt;
                    ) : (
                      &lt;TableCell style={{ textAlign: "center" }}&gt;
                        {data.calories}
                      &lt;/TableCell&gt;
                    )}
                  {editingIndex === data.id ? (
                  &lt;TableCell&gt;
                    &lt;TextField
                      style={{ width: "8rem" }}
                      onChange={(e) =&gt;inputChangeHandler(e)}
                      name="fat"
                      value={data.fat}
                    /&gt;
                &lt;/TableCell&gt;
                  ) : (
                    &lt;TableCell style={{ textAlign: "center" }}&gt;
                      {data.fat}
                    &lt;/TableCell&gt;
                  )}
                    {editingIndex === data.id ? (
                  &lt;TableCell align="center"&gt;
                      &lt;TextField
                        style={{ width: "8rem" }}
                        onChange={(e) =&gt;inputChangeHandler(e)}
                        name="carbs"
                        value={data.carbs}
                      /&gt;
                  &lt;/TableCell&gt;
                    ) : (
                      &lt;TableCell style={{ textAlign: "center" }}&gt;
                        {data.carbs}
                      &lt;/TableCell&gt;
                    )}
                    {editingIndex === data.id ? (
                  &lt;TableCell align="center"&gt;
                      &lt;TextField
                      disabled={false}
                        style={{ width: "8rem" }}
                        onChange={(e) =&gt;inputChangeHandler(e)}
                        name="protein"
                        value={data.protein}
                      /&gt;
                  &lt;/TableCell&gt;
                    ) : (
                      &lt;TableCell style={{ textAlign: "center" }}&gt;
                      {data.protein}
                      &lt;/TableCell&gt;
                    )}
                  &lt;TableCell style={{ textAlign: "center" }}&gt;
                    {editingIndex !== data.id ? (
                      &lt;EditIcon onClick={() =&gt; startEditing(data.id)} style= {{cursor: "pointer"}}/&gt;
                    ) : (
                      &lt;CheckIcon onClick={submitInputHandler} style= {{cursor: "pointer"}} /&gt;
                    )}
                  &lt;/TableCell&gt;
                  &lt;TableCell&gt;
                    {editingIndex !== data.id ? (
                      &lt;DeleteIcon onClick={() =&gt; deleteRowHandler(data.id)} style= {{cursor: "pointer"}}/&gt;
                    ) : (
                      &lt;CloseIcon onClick={stopEditing} style= {{cursor: "pointer"}} /&gt;
                    )}
                  &lt;/TableCell&gt;
                &lt;/TableRow&gt;
              ))}
              {/* &lt;TableRow&gt;
                &lt;TablePagination
                  count={rows.length}
                  rowsPerPage={rowsPerPage}
                  page={page}
                  onChangePage={handleChangePage}
                /&gt;
              &lt;/TableRow&gt; */}
            &lt;/TableBody&gt;
          &lt;/Table&gt;
        &lt;/Paper&gt;
      &lt;/div&gt;
    );
  };
  
  export default MyForm;</code></pre>
  </div>
  </div>
  </p>