-1

I'm using adazzle's React-Data-Grid to display a table data of users from a REST backend service. The grid is displaying the users data correctly. When I double-click on a cell in the grid, I am able to edit and change the cell data (as have successfully been done in the react-data-grid sample code, https://adazzle.github.io/react-data-grid/docs/examples/simple-grid). However after editing and when I move to another cell, I get the error: Cannot read property 'setState' as undefined which the error message I reproduce below. How do I fix this error? Thank you in advance!

Error message:

TypeError: Cannot read property 'setState' of undefined
onGridRowsUpdated
C:/kilostep_material/kilostep/src/App.js:59

> 59 | this.setState(state => {
     | ^  60 |   const rows = state.rows.slice();
  61 |   for (let i = fromRow; i <= toRow; i++) {
  62 |     rows[i] = { ...rows[i], ...updated };
View compiled
▶ 21 stack frames were collapsed.

App.js

import React, {useState} from "react";
import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import axios from 'axios';





export default function App() {


  const [isLoaded, setIsLoaded] = useState(false);


  const [rows,setRows] = useState([]);




  React.useEffect(() => {
      async function anyNameFunction() {
        const response = await axios.get('http://localhost:8080/user/all');
        setIsLoaded(true);
          console.log(response.data);
          setRows(response.data);
      }

      anyNameFunction();


  }, [])



  const columns = [
    { key: "_id", name: "_id", width: 250 },
    { key: "id", name: "ID", width: 100 },
    { key: "userName", name: "User Name", width: 250, editable: true, enableCellSelect: true },
    { key: "userTelNo", name: "Tel No", width: 250, editable: true, enableCellSelect: true },
    { key: "userEmail", name: "EMail", width: 250, editable: true, enableCellSelect: true },
    { key: "userRole", name: "Role", width: 150, editable: true, enableCellSelect: true },
    { key: "dateSaved", name: "Date Saved", width: 250 },
];



const state = { rows };



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


updated.userName);

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



  return (
    <ReactDataGrid
      columns={columns}
      rowGetter={i => state.rows[i]}
      onGridRowsUpdated={onGridRowsUpdated}
      rowsCount={rows.length}
      minHeight={500}
      enableCellSelect={true}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Ezani
  • 535
  • 3
  • 18

1 Answers1

1

In this case, you're trying to set the rows in your functional component using the this.setState which can only be used in class type Components. The keyword this is not accessible in functional components. You need to use the setRows from the useState hook you defined above in your code like this:

setRows(previousState => {
     //perform your calculation here
})
Sowmen Rahman
  • 344
  • 2
  • 5