title: React Hooks Read CSV From Local Machine
body: <p>I am trying to rewrite a function to read a CSV file and assign it to state. </p>
  
  <p>The general workflow is to upload a CSV file from local machine, parse it, divide into three different objects and assign it to state.</p>
  
  <p>However, I am getting this error:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'readable' of undefined</p>
  </blockquote>
  
  <p>While the class-based component works.</p>
  
  <p>I want to rewrite it using hooks since I would like then to use a global state and be able to access that information in other components.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>This is my functional component:</p>
  
  <pre><code>import React, { useState } from "react";
  import Papa from "papaparse";
  import _ from "lodash";
  
  const Upload = () =&gt; {
    const [state, setState] = useState({
      csvfile: null,
      tShirts: [null],
      felpe: [null]
    });
  
    function handleChange(event) {
      setState({
        csvfile: event.target.files[0]
      });
    }
  
    function importCSV(e) {
      e.preventDefault();
      const { csvfile } = state;
  
      Papa.parse(csvfile, {
        complete: updateData,
        header: true
      });
    }
  
    function updateData(result) {
      var data = result.data;
  
      var tshirts = _.map(data, function(o) {
        if (_.includes(o.stampa, "T-Shirt")) return o;
      });
      tshirts = _.without(tshirts, undefined);
  
      var felpe = _.map(data, function(obj) {
        if (_.includes(obj.stampa, "Felpa")) return obj;
      });
  
      felpe = _.without(felpe, undefined);
  
      setState({ tShirts: tshirts, felpe: felpe });
    }
  
    return (
      &lt;div&gt;
        &lt;div className="upload"&gt;
          &lt;p&gt;Carica gli ordini&lt;/p&gt;
          &lt;input
            className="upload-input"
            type="file"
            name="file"
            placeholder={null}
            onChange={handleChange}
          /&gt;
          &lt;p /&gt;
          &lt;button onClick={importCSV}&gt;Upload&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Upload;
  </code></pre>
  
  <p>And here the class-based component:</p>
  
  <pre><code>import React from "react";
  import Papa from "papaparse";
  import _ from "lodash";
  
  import TableData from "./TableData";
  
  class Upload extends React.Component {
    constructor() {
      super();
      this.state = {
        csvfile: null,
        tShirts: [null],
        felpe: [null]
      };
      this.updateData = this.updateData.bind(this);
    }
  
    handleChange = event =&gt; {
      this.setState({
        csvfile: event.target.files[0]
      });
    };
  
    importCSV = e =&gt; {
      e.preventDefault();
      const { csvfile } = this.state;
      Papa.parse(csvfile, {
        complete: this.updateData,
        header: true
      });
    };
  
    updateData(result) {
      var data = result.data;
  
      var tshirts = _.map(data, function(o) {
        if (_.includes(o.stampa, "T-Shirt")) return o;
      });
      tshirts = _.without(tshirts, undefined);
  
      var felpe = _.map(data, function(obj) {
        if (_.includes(obj.stampa, "Felpa")) return obj;
      });
  
      felpe = _.without(felpe, undefined);
  
      this.setState({ tShirts: tshirts, felpe: felpe });
    }
  
    render() {
      console.log(this.state);
      return (
        &lt;div&gt;
          &lt;div className="upload"&gt;
            &lt;p&gt;Carica gli ordini&lt;/p&gt;
            &lt;input
              className="upload-input"
              type="file"
              ref={input =&gt; {
                this.filesInput = input;
              }}
              name="file"
              placeholder={null}
              onChange={this.handleChange}
            /&gt;
            &lt;p /&gt;
            &lt;button onClick={this.importCSV}&gt;Upload&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Upload;
  </code></pre>