7

I'm using Papa Parse to parse a CSV file for Graphs. I want to store the data in React state after the file is parsed. Papa.Parse() doesn't return anything and results are provided asynchronously to a callback function. Also, setState() doesn't work inside a async callback. This question is similar to Retrieving parsed data from CSV.

I tried storing the data in state using below code, but as expected it didn't work.

componentWillMount() {

    function getData(result) {
      console.log(result); //displays whole data
      this.setState({data: result}); //but gets error here
    }

    function parseData(callBack) {
      var csvFilePath = require("./datasets/Data.csv");
      var Papa = require("papaparse/papaparse.min.js");
      Papa.parse(csvFilePath, {
        header: true,
        download: true,
        skipEmptyLines: true,
        complete: function(results) {
          callBack(results.data);
        }
      });
    }

    parseData(getData);
}

Here's the error I get when I set state inside getData(). enter image description here

The data is usable inside getData(), but I want to extract it.

How should I store the data in state or in some other variable so that I can use it for Graphs?

Amanshu Kataria
  • 2,838
  • 7
  • 23
  • 38

3 Answers3

13

The problem:

You try to call this.setState in the function getData. But this does not exist in the context of this function.

The solution:

I would try to not write function in functions, but write the functions in the class.

You class could look like this:

import React, { Component } from 'react';

class DataParser extends Component {

  constructor(props) {
    // Call super class
    super(props);

    // Bind this to function updateData (This eliminates the error)
    this.updateData = this.updateData.bind(this);
  }

  componentWillMount() {

    // Your parse code, but not seperated in a function
    var csvFilePath = require("./datasets/Data.csv");
    var Papa = require("papaparse/papaparse.min.js");
    Papa.parse(csvFilePath, {
      header: true,
      download: true,
      skipEmptyLines: true,
      // Here this is also available. So we can call our custom class method
      complete: this.updateData
    });
  }

  updateData(result) {
    const data = result.data;
    // Here this is available and we can call this.setState (since it's binded in the constructor)
    this.setState({data: data}); // or shorter ES syntax: this.setState({ data });
  }

  render() {
    // Your render function
    return <div>Data</div>
  }
}

export default DataParser;
Larce
  • 841
  • 8
  • 17
  • @Larce hey guys, I'm trying to recreate something like this solution but require call doesn't work for me.. any ideas? https://stackoverflow.com/questions/48800251/react-native-require-gotcha-works-for-local-image-file-but-not-csv-file-in-s/48803320#48803320 – SpicyClubSauce Feb 15 '18 at 17:25
  • @Larce, why does the bare `this.updateData` work as the callback function for complete, but `this.updateData(result)` does not work? If I replace `this.updateData` with an anonymous function that takes result and console.log's it, it works. – KernelSanders Jun 04 '18 at 15:05
1

You need to bind the getData():

function getData(result) {
    console.log(result); // displays whole data
    this.setState({data: result}); // but gets error here
}.bind(this)
סטנלי גרונן
  • 2,917
  • 23
  • 46
  • 68
Sandip Kumar Sharma
  • 11
  • 1
0

You can try react-papaparse for an easy way. For more detail about react-papaparse please visit react-papaparse. Thanks!

Bunlong
  • 652
  • 1
  • 9
  • 21