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

Question

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;

some html code like this ``` "<html lang="en">"} 1: {<!DOCTYPE html>: " <head>"} — samli prajapati
– samli prajapati, Commented Nov 4, 2020 at 4:47

Kalhan · Accepted Answer · 2020-11-04 05:55:37Z

5

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

edited Nov 4, 2020 at 5:55

answered Nov 4, 2020 at 5:00

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

samli prajapati Over a year ago

Got it but its not a json format how to show data in table

Kalhan Over a year ago

@samliprajapati add new configuration header: true, and then first raw of the csv should be the headings stackblitz.com/edit/react-r5nxcn?file=src%2FApp.js

Kalhan Over a year ago

@samliprajapati here is a complete example stackblitz.com/edit/react-r5nxcn?file=src%2FApp.js

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related