问在react中动态编辑和更新表单元格

EN

const Grades = () => {
  const [grade, setGrade] = useState("");
  const [data, setData] = useState([]);
  const [showEdit, setShoEdit] = useState(0);

  var count = 0;
  const handleChange = (event) => {
    setGrade(event.target.value);
  };

  const addGrade = () => {
    setData([...data, { Grade: grade, id: Math.floor(Math.random()*100) }]);
    setGrade("");
  };
  const editGrade = (row) => {
    console.log(row)
    setShoEdit(row.id);
    setGrade(row.id);
  }
  const saveGrade = (row) => {
    let update = data.map(list =>
      list.id === row.id ? ({...list, Grade: grade}) : list
    );
    setData([...update]);
  }

  return (
    <div className="container-xl">
      <div className="form-group row">
        <div className="col-md-1">
          <label className="col-form-label ">Grade</label>
        </div>
        <div className="col-md-4">
          <input
            type="text"
            value={grade}
            className="form-control"
            name="Grade"
            onChange={handleChange}
          />
        </div>

        {!showEdit && <div className="form-group col-md-6">
          <button
            type="button"
            className="btn btn-outline-primary"
            onClick={addGrade}
          >
            Add Grade
          </button>
        </div>}
      </div>
      <div className="form-group row">
        <table className="table">
          <thead className="thead-dark">
            <tr>
              <th>#</th>
              <th>Grades</th>
              <th>Grade Id</th>
              <th>Operations</th>
            </tr>
          </thead>
          <tbody>
            {data.map((row,i) => (
              <tr key={row.id}>
                <td>{++count}</td>
                <td>{row.Grade}</td>
                <td>{row.id}</td>
                <td>
                  {!(row.id === showEdit) ? <button
                  onClick={()=> editGrade(row)}
                    key={row.id}
                    className="btn btn-outline-primary"
                    type="button"
                  >
                    Edit
                  </button>:
                  <button
                  type="button"
                  className="btn btn-outline-primary"
                  onClick={()=>saveGrade(row)}
                >
                  Save
                </button>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Grades;