title: Sending file upload status from react-dropzone component to parent?
body: <p>I'm trying to send the the status of the uploaded file back to the parent component, using props and callbacks (as explained in <a href="https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17" rel="nofollow noreferrer" title="this">this</a> tutorial).</p>
  
  <p>My file upload is handled by the <a href="https://github.com/react-dropzone/react-dropzone" rel="nofollow noreferrer" title="react-dropzone">react-dropzone</a> component. </p>
  
  <p>Here are my components:</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>class App extends Component {
      constructor(props) {
          super(props);
          this.state = {
              doneUploading: false,
          };
      }
  
      dataFromFileDrop = (fileData) =&gt; {
          this.setState({
              doneUploading: fileData.doneUploading,
          });
      };
  
      render() {
          return (
              &lt;div className="App"&gt;
                  &lt;FileDrop dataFromFileFrop={this.dataFromFileDrop}/&gt;
                  { this.state.doneUploading ?  'Done uploading.' : 'Upload a video.' }
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>FileDrop.js</strong></p>
  
  <pre><code>class FileDrop extends Component {
      constructor(props) {
          super(props);
          this.state = { files: [] };
      }
  
      onDrop = (files) =&gt; {
          this.setState({
              files
          });
  
          // process file
  
          // send upload status to parent component
          const fileData = {
              doneUploading: true
          };
  
          this.props.dataFromFileDrop(fileData); // ERROR
      };
  
      render() {
          return (
              &lt;div className="FileDrop"&gt;
                  &lt;Dropzone onDrop={this.onDrop.bind(this)}&gt;
                    Upload video!
                  &lt;/Dropzone&gt;
              &lt;/div&gt;
          );
      };
  }
  </code></pre>
  
  <p>When I run the app and drop a file into the dropzone, I get an error saying <code>this.props.dataFromFileDrop</code> is not a function. May I know where I'm making a mistake?</p>
  
  <p>Is the error happening because I'm not passing <code>dataFromFileDrop</code> as a prop to the Dropzone component?</p>
  
  <hr>
  
  <p>Adding this to the constructor in FileDrop didn't help:</p>
  
  <pre><code>this.props.dataFromFileDrop.bind(this);
  </code></pre>