Sending file upload status from react-dropzone component to parent?

Question

I'm trying to send the the status of the uploaded file back to the parent component, using props and callbacks (as explained in this tutorial).

My file upload is handled by the react-dropzone component.

Here are my components:

App.js

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            doneUploading: false,
        };
    }

    dataFromFileDrop = (fileData) => {
        this.setState({
            doneUploading: fileData.doneUploading,
        });
    };

    render() {
        return (
            <div className="App">
                <FileDrop dataFromFileFrop={this.dataFromFileDrop}/>
                { this.state.doneUploading ?  'Done uploading.' : 'Upload a video.' }
            </div>
        );
    }
}

FileDrop.js

class FileDrop extends Component {
    constructor(props) {
        super(props);
        this.state = { files: [] };
    }

    onDrop = (files) => {
        this.setState({
            files
        });

        // process file

        // send upload status to parent component
        const fileData = {
            doneUploading: true
        };

        this.props.dataFromFileDrop(fileData); // ERROR
    };

    render() {
        return (
            <div className="FileDrop">
                <Dropzone onDrop={this.onDrop.bind(this)}>
                  Upload video!
                </Dropzone>
            </div>
        );
    };
}

When I run the app and drop a file into the dropzone, I get an error saying this.props.dataFromFileDrop is not a function. May I know where I'm making a mistake?

Is the error happening because I'm not passing dataFromFileDrop as a prop to the Dropzone component?

---

Adding this to the constructor in FileDrop didn't help:

this.props.dataFromFileDrop.bind(this);

Answer 1

Mistake in function name FileDrop - FileFrop

//Replace
<FileDrop dataFromFileFrop={this.dataFromFileDrop}/>
//To 
<FileDrop dataFromFileDrop={this.dataFromFileDrop}/>