How to get CSV data using Reactjs and store into state?

user_11786260 0
Viewed 2117

I have tried using "papparse" but did not get exact data. What is wrong in my code?

I want using CSV file getting all data by JSON format and set into my hookState.

Code:

import React from "react";
import { Table, Tag, Space } from "antd";
import Papa from "papaparse";
function Home() {
  const [rows, setRows] = React.useState([]);
  React.useEffect(() => {
    async function getData() {
      const response = await fetch("../Assets/images/state_wise_data.csv");
      const reader = response.body.getReader();
      const result = await reader.read(); // raw array
      const decoder = new TextDecoder("utf-8");
      const csv = decoder.decode(result.value); // the csv text
      const results = Papa.parse(csv, { header: true }); // object with { data, errors, meta }
      const rows = results.data; // array of objects
      setRows(rows);
    }
    getData();
  }, []);
  console.log(rows);
  return (
    <div>
      <Table columns={columns} dataSource={rows} />
    </div>
  );
}
export default Home;
react-hooks reactjs
1 Answers

as per the documentation this is the approach

React.useEffect(() => {
    Papa.parse("../Assets/images/state_wise_data.csv", {
        download: true,
        complete: data => {
            setRows(data.data);
        }
    });
}, []);

demo

if you are having errors check console.log(data); inside complete callback

here is a complete example

user_20327510
Related