title: How to send the value of variable from a child component to the parent component?
body: <p>I need to load data from CSV file (see <code>CSVDataTable.js</code> provided below) and pass these data to the main component <code>BatchFlights.js</code> in the variable <code>this.state.csvData</code>. Then I use <code>this.state.csvData</code> in the API request in <code>fetchData()</code>.</p>
  
  <p>The component <code>CSVDataTable.js</code> loads data correctly. However, how can I access it from <code>BatchFlights.js</code> in <code>handleChange</code>?</p>
  
  <p><strong>BatchFlights.js</strong></p>
  
  <pre><code>import React, { Component, Fragment } from 'react';
  import TopControls from "./layout/batch/TopControls"
  import MainContent from "./layout/batch/MainContent"
  import styles from "./layout/styles/styles";
  import { withStyles } from "@material-ui/core/styles";
  
  
  class BatchFlights extends Component {
  
    constructor(props) {
        super(props);
        this.state = {
            holdingTime: 1,
            csvData: [],
            delay: 0,
            delay_probability: 0,
            delay_cat: "NA",
            labelWidth: 0
        };
        this.handleChange = this.handleChange.bind(this);
    };
  
    componentDidMount() {
        this.fetchData();
    };
  
    fetchData = () =&gt; {
        const url = "http://localhost:8000?"+
          'holdingTime='+this.state.holdingTime+
          '&amp;csvData='+this.state.csvData;
  
        fetch(url, {
          method: "GET",
          dataType: "JSON",
          headers: {
            "Content-Type": "application/json; charset=utf-8",
          }
        })
        .then((resp) =&gt; {
          return resp.json()
        })
        .then((data) =&gt; {
          this.updateDelay(data.prediction,data.probability)
        })
        .catch((error) =&gt; {
          console.log(error, "catch the hoop")
        })
    };
  
    handleChange = (name, event) =&gt; {
      this.setState({
        [name]: event.target.value
      }, () =&gt; {
        console.log("csvData", this.state.csvData)
      });
    };
  
    render() {
      return (
  
          &lt;Fragment&gt;
  
              &lt;TopControls state={this.state} styles={this.props.classes} handleChange={this.handleChange} /&gt;
  
              &lt;MainContent state={this.state} styles={this.props.classes} /&gt;
  
          &lt;/Fragment&gt;
  
      );
    }
  }
  
  const StyledBatchFlights = withStyles(styles)(BatchFlights);
  export default StyledBatchFlights;
  </code></pre>
  
  <p><strong>layout/batch/MainContent.js</strong></p>
  
  <pre><code>import React, { Component, Fragment } from 'react';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import CSVDataTable from './CSVDataTable';
  
  class MainContent extends Component {
      render() {
          return (
            &lt;Fragment&gt;
                &lt;CssBaseline /&gt;
                &lt;main className={this.props.styles.mainPart}&gt;
                    &lt;CSVDataTable /&gt;
                &lt;/main&gt;
            &lt;/Fragment&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>layout/batch/CSVDataTable.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { CsvToHtmlTable } from 'react-csv-to-table';
  import ReactFileReader from 'react-file-reader';
  import Button from '@material-ui/core/Button';
  
  const sampleData = `
  NUM,WAKE,PLANNED_TURNAROUND,SIBT,SOBT,DISTANCE_FROM_ORIGIN,DISTANCE_TO_TARGET
  1,M,45,2016-01-01 04:05:00,2016-01-01 14:10:00,2000,2000
  `;
  
  class CSVDataTable extends Component {
  
      state={
        csvData: null
      };
  
      handleFiles = files =&gt; {
          var reader = new FileReader();
          reader.onload =  (e) =&gt; {
            // Use reader.result
            this.setState({
              csvData: reader.result
            })
          }
          reader.readAsText(files[0]);
      }
  
      render() {
          return &lt;div&gt;
            &lt;ReactFileReader
              multipleFiles={false}
              fileTypes={[".csv"]}
              handleFiles={this.handleFiles}&gt;
              &lt;Button
                  variant="contained"
                  color="primary"
              &gt;
                  Load data
              &lt;/Button&gt;
  
            &lt;/ReactFileReader&gt;
            &lt;CsvToHtmlTable
              data={this.state.csvData || sampleData}
              csvDelimiter=","
              tableClassName="table table-striped table-hover"
            /&gt;
      &lt;/div&gt;
      }
  }
  
  export default CSVDataTable;
  </code></pre>
  
  <p><strong>Update:</strong></p>
  
  <pre><code>  setCsvData = csvData =&gt; {
      this.setState({
        csvData
      }, () =&gt; {
        console.log("csvData",this.state.csvData)
      });
    }
  </code></pre>