title: Upload file csv into table react.js
body: <p>Hi the component below allows the user to import a csv file and display it on a CsvToHtmlTable, the code below allows the user to select the csv file which is then inserted in the csvData variable, however, of this code I have to ensure that it is displayed in the table, but when the file is uploaded the table remains empty, what can I do?</p>
  <p><strong>React.js Code:</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import {
    Row,
    Col,
    Button,
    UncontrolledButtonDropdown,
    DropdownMenu,
    DropdownToggle,
  } from &quot;reactstrap&quot;;
  import Widget from &quot;../../components/Widget&quot;;
  import s from &quot;./Static.module.scss&quot;;
  import { toast } from &quot;react-toastify&quot;;
  import { v4 as uuid } from &quot;uuid&quot;;
  import { CsvToHtmlTable } from 'react-csv-to-table';
  
  class ImportazioneBolleView extends React.Component {
  
    
    constructor(props) {
      super(props);
  
      this.textInput = React.createRef();
  
      this.state = {
        fileName:'',
        fileContent: '',
        tableStyles: [],
        input: &quot;&quot;,
        csvData: null,
      };
  
      
    }
  
    errornotification = (Message) =&gt; {
      let id = uuid();
      toast.error(
        &lt;div&gt;
          {Message}
          &lt;br /&gt;
        &lt;/div&gt;,
        { ...this.state.options, toastId: id }
      );
    };
  
    notificalocal = () =&gt; toast.success(&quot;Cliente inserito con successo!&quot;, this.state.options);
  
    
  
    getImgSrc = (level) =&gt;
      this.state.windLevels.find((w) =&gt; w.value === level).img;
  
    uploadfile = (e) =&gt;
    {  let reader = new FileReader();
      reader.onload = () =&gt; {
        
        this.setState({
          csvData: reader.result
        })
      
      }
    }
  
    render() {
      return (
        &lt;div className={s.root}&gt;
          {&quot; &quot;}
          &lt;h2 className=&quot;page-title&quot;&gt;
            {&quot; &quot;}
            Importazione Bolle - &lt;span className=&quot;fw-semi-bold&quot;&gt;
              {&quot; &quot;}
              Amministrazione{&quot; &quot;}
            &lt;/span&gt;{&quot; &quot;}
          &lt;/h2&gt;{&quot; &quot;}
          &lt;Row&gt;
            {&quot; &quot;}
            &lt;Col&gt;
              {&quot; &quot;}
              &lt;Widget settings close bodyClass={s.mainTableWidget}&gt;
                {&quot; &quot;}
                &lt;p&gt; &lt;/p&gt; &lt;p&gt; &lt;/p&gt; &lt;p&gt; &lt;/p&gt; &lt;p&gt; &lt;/p&gt;{&quot; &quot;}
               
                &lt;CsvToHtmlTable data={  this.state.csvData} csvDelimiter=&quot;,&quot; tableClassName=&quot;table table-striped table-hover&quot;/&gt;
                &lt;div className=&quot;clearfix&quot;&gt;
                  {&quot; &quot;}
                  &lt;div className=&quot;float-right&quot;&gt;
                    {&quot; &quot;}
                    &lt;Button color=&quot;success&quot; className=&quot;mr-xs&quot; size=&quot;sm&quot;&gt;
                      {&quot; &quot;}
                      Back{&quot; &quot;}
                    &lt;/Button&gt;{&quot; &quot;}
                    &lt;UncontrolledButtonDropdown&gt;
                      {&quot; &quot;}
                      &lt;DropdownToggle
                        color=&quot;warning&quot;
                        className=&quot;mr-xs&quot;
                        size=&quot;sm&quot;
                        caret
                      &gt;
                        {&quot; &quot;}
                        Importa COMET{&quot; &quot;}
                      &lt;/DropdownToggle&gt;{&quot; &quot;}
                       &lt;DropdownMenu&gt;
                        &lt;div align=&quot;center&quot;&gt;
                          &lt;input type=&quot;file&quot;  onChange={this.uploadfile}/&gt;
                        &lt;/div&gt;
                      &lt;/DropdownMenu&gt;{&quot; &quot;}
                    &lt;/UncontrolledButtonDropdown&gt;{&quot; &quot;}
                    &lt;UncontrolledButtonDropdown&gt;
                      {&quot; &quot;}
                      &lt;DropdownToggle
                        color=&quot;danger&quot;
                        className=&quot;mr-xs&quot;
                        size=&quot;sm&quot;
                        caret
                      &gt;
                        {&quot; &quot;}
                        Importa Sonepar{&quot; &quot;}
                      &lt;/DropdownToggle&gt;{&quot; &quot;}
                       &lt;DropdownMenu&gt;
                        &lt;div align=&quot;center&quot;&gt;
                          &lt;input type=&quot;file&quot;  onChange={this.uploadfile}/&gt;
                        &lt;/div&gt;
                      &lt;/DropdownMenu&gt;{&quot; &quot;}
                    &lt;/UncontrolledButtonDropdown&gt;{&quot; &quot;}
                  &lt;/div&gt;{&quot; &quot;}
                  
                  &lt;p&gt; &lt;/p&gt;{&quot; &quot;}
                &lt;/div&gt;{&quot; &quot;}
              &lt;/Widget&gt;{&quot; &quot;}
            &lt;/Col&gt;{&quot; &quot;}
          &lt;/Row&gt;{&quot; &quot;}
        &lt;/div&gt;
      );
    }
  }
  
  export default ImportazioneBolleView;
  </code></pre>