Как преобразовать его в реагирующую функциональную составляющую

Question

У меня есть это из response-data-grid. Я уже конвертировал его в функциональный компонент, но застрял при изменении содержимого строки, изменения вступят в силу

original

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
    const rows = state.rows.slice();
    for (let i = fromRow; i <= toRow; i++) {
      rows[i] = { ...rows[i], ...updated };
    }
    return { rows };
  });
};

мой код

    const columns = [some data];
    let rowsIntial = [some data];
    const[rows,setRows]=useState(rowsinitial);

    const   onGridRowsUpdated = ({ fromRow, toRow, updated }) => {

        const rows = rows.slice();
       console.log(rows);
       for (let i = fromRow; i <= toRow; i++) {
          rows[i] = { ...rows[i], ...updated };
         }

      return rows;
   };

JSX:

                    <ReactDataGrid
                        columns={columns}
                        rows={rows}
                        onGridRowsUpdated={onGridRowsUpdated}
                        enableCellSelect={true}
                    />

как мне изменить onGridRowsUpdated, чтобы заставить работать?

Answer 1

const onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    setRows((state) => {
        const newRows = state.slice();
        console.log(newRows);
        for (let i = fromRow; i <= toRow; i++) {
            newRows[i] = { ...newRows[i], ...updated };
        }
        return newRows;
    }
};