react hooks axios call failing to load grid

Question

I have the following code but my Grid does not load with the following code, no error though. I believe it is due to the asynchronous axios call, but I am unable to figure out how to get away with it.

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

const selectors = Data.Selectors;

function getRows(rows, filters) {
  return selectors.getRows({ rows, filters });
}

function Example() {
  let rows = [];
  let filteredRows = [];

  const [filters, setFilters] = useState({});

  React.useEffect(() => {
      async function anyNameFunction() {
        const response = await axios.get('/api/files/fileData/File12.txt');
        rows = response.data;
        filteredRows = getRows(rows, filters);
        console.log(filteredRows)         // this works fine and gets me the result
      }

      anyNameFunction();

  }, [])

  return (
    <ReactDataGrid             // this grid is empty
      columns={columns}
      rowGetter={i => filteredRows[i]}
      rowsCount={filteredRows.length}
      minHeight={500}
      toolbar={<Toolbar enableFilter={true} />}
      onAddFilter={filter => setFilters(handleFilterChange(filter))}
      onClearFilters={() => setFilters({})}
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Example />, rootElement);

I am following this link Only difference being i want to load the data from a file which is back-end node api.

Answer 1

You are using rows and filteredRows as arrays. Your function component doesn't know something has changed because you are not setting anything in the state so there's no reason to re-render after the response has arrived.

-----EDIT----- You don't really need rows because you are not using it anywhere.

Try doing the following change:

  const [filteredRows, setFilteredRows] = useState([]);
  const [filters, setFilters] = useState({});

  React.useEffect(() => {
      async function anyNameFunction() {
        const response = await axios.get('/api/files/fileData/File12.txt');
        setFilteredRows(getRows(response.data, {}));
      }

      anyNameFunction();

  }, [])

-----EDIT AGAIN----- After reading everything related to the grid package:

const [rows, setRows] = useState([]);
const [filters, setFilters] = useState({});

React.useEffect(() => {
      async function anyNameFunction() {
        const response = await axios.get('/api/files/fileData/File12.txt');
        setRows(response.data)
      }

      anyNameFunction();

  }, [])

const  filteredRows = getRows(response.data, filters);
return ....