Retrieving data from csv file in react js

Question

I am using React js to retrieve data.

Data.csv file location: /chart/data.csv

============ Date | id | No. 2021-Jan-2 | 1 | 3 2021-Jan-3 | 3 | 1 2021-Jan-4 | 4 | 4 2021-Jan-5 | 2 | 10 2021-Jan-6 | 6 | 7

Practice.js file location: /chart/Practice.js

I have tried to retrieve data from csv file and see in browser.

Here is how I have tried:

import React from 'react';
import * as d3 from 'd3';

const Practice = () => {
  const [data, setData] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    d3.csv("/data.csv").then((d) => {
      setData(d);
      setLoading(false);
    });
    return () => undefined;
  }, []);
  return (
        <div>
        <header>
            {loading && <div>loading</div>}
            {!loading && <div>data={data}</div>}
        </header>
        </div>
    );
}

export default Practice;

I keep getting an error message saying that TypeError: d3__WEBPACK_IMPORTED_MODULE_5__.csv(...).then is not a function

Am I using d3 correctly?

React runs in the context of your browser. Unless that file is a public/ file, your browser has no idea where that location is. — Abraham Labkovsky
– Abraham Labkovsky, Commented Mar 5, 2021 at 0:41

Abraham Labkovsky · Accepted Answer · 2021-03-05 00:55:04Z

You need to either serve the file as a static asset if you wish to refer to it, or, for testing, use something you can find online....

Below is a sample using dome random csv I found on github.

Also, d3 returns an object which you cannot set as text in react. I have stringified it below...

import React from "react";
import * as d3 from "d3";

const Practice = () => {
  const [data, setData] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    d3.csv("https://raw.githubusercontent.com/curran/data/gh-pages/dbpedia/cities/properties.csv").then((d) => {
      setData(JSON.stringify(d, null, 2));
      setLoading(false);
    });
    return () => undefined;
  }, []);
  return (
    <div>
      <header>
        {loading && <div>loading</div>}
        {!loading && <pre>data={data}</pre>}
      </header>
    </div>
  );
};

export default Practice;

Collectives™ on Stack Overflow

Retrieving data from csv file in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related