How to assign csv data to state in react?

Question

I have a simple react component let user to upload csv file using react-csv-reader then upload it to database. How to assign csv data to state in react? I meet the error Import.jsx:23 Uncaught TypeError: Cannot read property 'state' of undefined when I read the data from state.

import React from "react";

import axios from "axios";
import PropTypes from 'prop-types';
import CSVReader from "react-csv-reader";
import "assets/css/import.css";

class Import extends React.Component {
    constructor(props) {
            super(props);
            this.state = {data:[]};
    }


    handleForce = data => {
        console.log(data.length);
        console.log(data);
        this.setState({data: data});
    };

    handleClick() {
        console.log("success");
        console.log(this.state.data);/*this is where error occur*/
    }


  render() {

    return (
    <div className="container">
    <CSVReader
      className="csv-input"
      label="Select CSV file to import"
      onFileLoaded={this.handleForce}
    />
    <div>

    </div>
    <button onClick={this.handleClick}>
        Upload
      </button>
    </div>

    );
  }
}

Import.propTypes = {
  classes: PropTypes.object.isRequired,
};



export default Import;

It successfully print in console at line console.log(data.length); and console.log(data);. However, I think it fail to assign the csv data to state.

This is the csv data successfully printed in console.

0: (11) ["identifier", "postal", "volume", "weight", "service_time", "phone", "customer_name", "window_start", "window_end", "lat", "lng"]
1: (11) ["SN48164550", "089952", "1", "1", "15", "90648664", "Customer 860", "2018-10-11 10:00:00", "2018-10-11 13:00:00", "1.27601", "103.836"]
2: (11) ["SN78463977", "269836", "1", "1", "15", "92656072", "Customer 517", "2018-10-11 16:00:00", "2018-10-11 19:00:00", "1.31924", "103.797"]
3: (11) ["SN16822741", "559782", "1", "1", "15", "94274895", "Customer 202", "2018-10-11 12:00:00", "2018-10-11 15:00:00", "1.36392", "103.861"]

trixn · Accepted Answer · 2019-05-14 08:42:10Z

3

Your handleClick handler is not bound so accessing this inside of it will not work. You either need to bind it in the constructor or use an arrow function.

handleClick = () => {
    console.log("success");
    console.log(this.state.data);/*this is where error occur*/
}

or

constructor(props) {
    super(props);
    this.state = {data:[]};
    this.handleClick = this.handleClick.bind(this);
}

edited May 14, 2019 at 8:42

answered May 14, 2019 at 8:35

trixn

16.4k2 gold badges40 silver badges59 bronze badges

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

Comments

kgunbin · Accepted Answer · 2019-05-14 08:34:43Z

1

It seems that handleClick is not bound, therefore this is undefined inside it. Use instead:

    handleClick = () => {
        console.log("success");
        console.log(this.state.data);/*this is where error occur*/
    }

answered May 14, 2019 at 8:34

kgunbin

617 bronze badges

Comments

YourSelf · Accepted Answer · 2019-05-14 08:42:49Z

0

As the guys already said your handleClick is is not bound to this So to solve this problem you need to bind it by changing your on click to

<button onClick={this.handleClick.bind(this)}>
        Upload
</button>

Or as others have mentioned make your function an arrow function

handleClick = () => {
    console.log("success");
    console.log(this.state.data);/*this is where error occur*/
}

or my least favorit way, bind in the consructor.

constructor(props) {
    super(props);
    this.state = {data:[]};
    this.handleClick = this.handleClick.bind(this);
}

answered May 14, 2019 at 8:42

YourSelf

206 bronze badges

Collectives™ on Stack Overflow

How to assign csv data to state in react?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related