How do I pass the CSVReader state to a Material DataGrid?

[Diego-Hernandez-Moodys]

I'm storing the result in the state, but I don't know how to use your useCSVReader to create a state that doesn't rely on rendering the CSVReader tag to store the state that can be passed somewhere else.

  return (
    <CSVReader onUploadAccepted={(results) => setState(results)}>
      {render}
    </CSVReader>
  );

Heres's the full code that relies on the original demo. I'm using styled-components to make it easier to clean up the JSX. Would I need to convert it to a JSON first?

import React, { useEffect, useState } from "react";
import { DataGrid } from "@mui/x-data-grid";
import { useCSVReader } from "react-papaparse";

// Styles
import {
  Aside,
  ButtonBrowse,
  LoadedFile,
  ButtonRemove,
  TableWrapper
} from "./CsvReader.styles";

const initial_state = {
  results: []
};

function CSVReader() {
  const [state, setState] = useState(initial_state.data);
  const [loading, setLoading] = useState(initial_state.errors);
  const [errors, setErrors] = useState(initial_state.meta);

  const { CSVReader } = useCSVReader();

  function fetchResults(results) {
    setState(results["data"]);
    setErrors(results["errors"]);
    setLoading(results["meta"]);
    return;
  }

  function render({
    getRootProps,
    acceptedFile,
    ProgressBar,
    getRemoveFileProps
  }) {
    return (
      <Aside>
        <ButtonBrowse {...getRootProps()}>Browse file</ButtonBrowse>
        <LoadedFile>{acceptedFile && acceptedFile.name}</LoadedFile>
        <ButtonRemove {...getRemoveFileProps()}>Remove</ButtonRemove>
        <ProgressBar />
      </Aside>
    );
  }

  console.log("---------------------------");
  console.log(state);
  console.log("---------------------------");

  return (
    <CSVReader onUploadAccepted={fetchResults}>{render}</CSVReader>
  );
}

// Have no idea what I'm doing
function DataTable() {
  const reader = CSVReader();

  return (
    <TableWrapper>
      <DataGrid
        rows={reader.acceptedFile}
        // columns={data}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
    </TableWrapper>
  );
}

export default DataTable;

[Diego-Hernandez-Moodys]

Solved it.

I had to set the fetchResults function as a parameter to CsvReader, and treat CsvReader as a child component to DataTable

function CSVReader({fetchResults}) {
  const { CSVReader } = useCSVReader();

  function render({
    getRootProps,
    acceptedFile,
    ProgressBar,
    getRemoveFileProps
  }) {
    return (
      <Aside>
        <ButtonBrowse {...getRootProps()}>Browse file</ButtonBrowse>
        <LoadedFile>{acceptedFile && acceptedFile.name}</LoadedFile>
        <ButtonRemove {...getRemoveFileProps()}>Remove</ButtonRemove>
        <ProgressBar />
      </Aside>
    );
  }

  console.log("---------------------------");
  console.log(state);
  console.log("---------------------------");

  return (
    <CSVReader onUploadAccepted={fetchResults}>{render}</CSVReader>
  );
}

And now treat DataTable as the parent with the states

// index.js for the DataTable component
import CsvReader from "./CsvReader/index"

function DataTable() {

  const [state, setState] = useState(initial_state.data);
  const [loading, setLoading] = useState(initial_state.meta);
  const [errors, setErrors] = useState(initial_state.errors);
  
  function fetchResults(results) {
    setState(results["data"]);
    setErrors(results["errors"]);
    setLoading(results["meta"]);
    return;
  }

  return (
    <>
    <CsvReader fetchResults={fetchResults} />
    <TableWrapper>
    
      <DataGrid
        rows={state}
        columns={[]}
        pageSize={5}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
      />
    </TableWrapper>
    </>
  );
}

export default DataTable;