How to show the imported csv data into a table using reactjs?

Question

I have an upload button to import only CSV files to my Reactjs application. I can successfully upload the data(CSV) using React file reader but now I want to show the CSV data it into a table. I think this could help me but I cannot understand how to use it https://github.com/marudhupandiyang/react-csv-to-table here. Below is my code:

import React, { Component } from 'react';
import ReactFileReader from 'react-file-reader';
import { CsvToHtmlTable } from 'react-csv-to-table';
import './App.css';

class App extends Component {

 constructor(props){
  super(props);
  this.state = {
    csvData: ''
  };
}

handleFiles = files => {
     var reader = new FileReader();
     reader.onload = function(e) {
     // Use reader.result
       this.setState({
         csvData: reader.result
       })
     }
   reader.readAsText(files[0]);
}

render() {
return (
    <div>
         <ReactFileReader handleFiles={this.handleFiles} fileTypes={'.csv'}>
                 <button className='btn'>Upload</button>
          </ReactFileReader>
          <CsvToHtmlTable
               data={this.state.csvData}
               csvDelimiter=","
               tableClassName="table table-striped table-hover"
           />
   </div>

    );
  }
}

export default App;

please help. It's very important to me.

There are no errors in the console. I just want to know how to use the that csv data to be put into the table using this link github.com/marudhupandiyang/react-csv-to-table which requires the sample data. Now to implement here I need that csv data but I dont understand how to use it outside handleFiles scope. — vnaysngh
– vnaysngh, Commented Feb 15, 2018 at 20:25
Your code seems to be missing several elements. You need to 1) Set the state of your component with the data received by the file reader and 2) render CsvToHtmlTable component. — Charlie Weems
– Charlie Weems, Commented Feb 15, 2018 at 20:29
done making changes. It still not works. Neither it gives me any error. — vnaysngh
– vnaysngh, Commented Feb 15, 2018 at 20:35

Kunukn · Accepted Answer · 2018-02-15 21:30:52Z

3

You almost got it. Be careful when using setState inside a function. This reference will be re-binded to the function scope. Use this instead

 handleFiles = files => {
    let reader = new FileReader();
    reader.onload = () => {
      // Use reader.result
      this.setState({
        csvData: reader.result
      })
    }
    reader.readAsText(files[0]);
  }

You can test it here. https://codesandbox.io/s/qlj338vnkj

answered Feb 15, 2018 at 21:30

Kunukn

2,2361 gold badge17 silver badges17 bronze badges

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

2 Comments

vnaysngh Over a year ago

Now if I wish to change the route and show the table in another component right after uploading the csv, how shall I do it?

Roman Nozhenko Over a year ago

save result in redux

Manas · Accepted Answer · 2021-11-20 20:52:03Z

0

You can use this to show up csv in react table. You can use papaparse

import Papa from 'papaparse';

And then fetch the csv

fetchCsv() {
    return fetch('/data/data.csv').then(function (response) {

      let reader = response.body.getReader();
      let decoder = new TextDecoder('utf-8');

      return reader.read().then(function (result) {
        return decoder.decode(result.value);
      });
    });
  }
    async getCsvData() {
    let csvData = await this.fetchCsv();
    let results = Papa.parse(csvData, { header: true })
    this.getData(results)

  }

https://github.com/manaspandey45/react-csv-data-table

edited Nov 20, 2021 at 20:52

answered Nov 20, 2021 at 16:17

Manas

113 bronze badges

Collectives™ on Stack Overflow

How to show the imported csv data into a table using reactjs?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related