title: TypeError: Cannot read property 'setState' of undefined onGridRowsUpdated (adazzle React Data Grid )
body: <p>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, <a href="https://adazzle.github.io/react-data-grid/docs/examples/simple-grid" rel="nofollow noreferrer">https://adazzle.github.io/react-data-grid/docs/examples/simple-grid</a>). 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!</p>
  <p>Error message:</p>
  <pre><code>TypeError: Cannot read property 'setState' of undefined
  onGridRowsUpdated
  C:/kilostep_material/kilostep/src/App.js:59
  
  &gt; 59 | this.setState(state =&gt; {
       | ^  60 |   const rows = state.rows.slice();
    61 |   for (let i = fromRow; i &lt;= toRow; i++) {
    62 |     rows[i] = { ...rows[i], ...updated };
  View compiled
  ▶ 21 stack frames were collapsed.
  </code></pre>
  <p>App.js</p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import ReactDataGrid from &quot;react-data-grid&quot;;
  import axios from 'axios';
  
  
  
  
  
  export default function App() {
  
  
    const [isLoaded, setIsLoaded] = useState(false);
  
  
    const [rows,setRows] = useState([]);
  
  
  
  
    React.useEffect(() =&gt; {
        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: &quot;_id&quot;, name: &quot;_id&quot;, width: 250 },
      { key: &quot;id&quot;, name: &quot;ID&quot;, width: 100 },
      { key: &quot;userName&quot;, name: &quot;User Name&quot;, width: 250, editable: true, enableCellSelect: true },
      { key: &quot;userTelNo&quot;, name: &quot;Tel No&quot;, width: 250, editable: true, enableCellSelect: true },
      { key: &quot;userEmail&quot;, name: &quot;EMail&quot;, width: 250, editable: true, enableCellSelect: true },
      { key: &quot;userRole&quot;, name: &quot;Role&quot;, width: 150, editable: true, enableCellSelect: true },
      { key: &quot;dateSaved&quot;, name: &quot;Date Saved&quot;, width: 250 },
  ];
  
  
  
  const state = { rows };
  
  
  
  const onGridRowsUpdated = ({ fromRow, toRow, updated }) =&gt; {
  
  
  updated.userName);
  
    this.setState(state =&gt; {
      const rows = state.rows.slice();
      for (let i = fromRow; i &lt;= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };
  
  
  
    return (
      &lt;ReactDataGrid
        columns={columns}
        rowGetter={i =&gt; state.rows[i]}
        onGridRowsUpdated={onGridRowsUpdated}
        rowsCount={rows.length}
        minHeight={500}
        enableCellSelect={true}
      /&gt;
    );
  }
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>