How to import a CSV file in ReactJs?

Question

I am trying to import a csv file that is in a folder called data on the same level as this function. I've tried to incorporate the solution I found on here, but no luck and I don't know what I need to modify.

getData.jsx

import React, { useState, useEffect } from 'react';
import Papa from 'papaparse';

export default function GetData(artist) {
    const data = Papa.parse(fetchCsv);
    console.log(data);
    return data;
}

async function fetchCsv() {
     const response = await fetch('data/artist_data.csv');
     const reader = response.body.getReader();
     const result = await reader.read();
     const decoder = new TextDecoder('utf-8');
     const csv = decoder.decode(result.value);
     return csv;
 }

You will need import the csv to your project using some tool like some of this: stackoverflow.com/questions/52210467/… then you can import csv from 'data/artist_data.csv' — Kevyn Klava
– Kevyn Klava, Commented Apr 25, 2020 at 2:27
You can also use csv-parse stackoverflow.com/a/72404267/343900 — keemor
– keemor, Commented May 27, 2022 at 10:54

Guru Hadadi · Accepted Answer · 2020-04-25 02:48:25Z

9

Few problems I see here.

When you do fetch('data/mycsv.csv') you are essentially making a request to http://localhost:3000/data/mycsv.csv. Check the n/w tab and you will see the response returned is your html. React first loads your root page and then checks further for routes.
Some coding errors like - you haven't called the fetchCsv fun inside GetData function. Also you need to await for fetchCsv.

Solution:

Move your data folder which has your csv file to the public folder and make corrections to your code.

import React from 'react';
import Papa from 'papaparse';

async function GetData(artist) {
    const data = Papa.parse(await fetchCsv());
    console.log(data);
    return data;
}

async function fetchCsv() {
    const response = await fetch('data/mycsv.csv');
    const reader = response.body.getReader();
    const result = await reader.read();
    const decoder = new TextDecoder('utf-8');
    const csv = await decoder.decode(result.value);
    console.log('csv', csv);
    return csv;
}

I have tested the above code in my local and it works fine.

answered Apr 25, 2020 at 2:48

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

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

1 Comment

Winsome Over a year ago

Thankyou, this worked perfect and you answered questions that I was wondering too.

Collectives™ on Stack Overflow

How to import a CSV file in ReactJs?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related