React Dropzone issue : children is not a function

Question

I've installed react dropzone in a react app. When adding the component dropzone, the app crashes, claiming that:

TypeError: children is not a function
Dropzone.render
node_modules/react-dropzone/dist/es/index.js:478
475 | var isMultipleAllowed = multiple || filesCount <= 1;
476 | var isDragAccept = filesCount > 0 && 
allFilesAccepted(draggedFiles, this.props.accept);
477 | var isDragReject = filesCount > 0 && (!isDragAccept ||!isMultipleAllowed);
> 478 | return children({
  | ^  479 |   isDragActive: isDragActive,
480 |   isDragAccept: isDragAccept,
481 |   isDragReject: isDragReject,

Yet, everything seems fine. My App.js is:

import React, { Component } from 'react';
import DropImg from './components/DropImg.js';

class App extends Component {
render() {
return (
  <div className="App">
   <DropImg />
  </div>
)}}
export default App;

and the component DropImg is:

import React, {Component} from "react";
import Dropzone from "react-dropzone"

class DropImg extends Component{
render(){
    return(
        <div>
            <h1>Drop your file</h1>
            <Dropzone>Drop file here</Dropzone>
        </div>
    )}}

export default DropImg;

There are no functions to handle drag & whatnot. Just a very basic set up. Yet it crashes. Why? The issue seems to come from the react-dropzone package itself.

ps: I've read the documentation, but it was not crystal clear. It is the first time I'm implementing such a feature, could you please explain to me how to fix this issue in a simple manner? Thanks!

Answer 1

As the error message says, Dropzone is expecting a render function but you didn't provide it.

The render property function is what you use to render whatever you want to based on the state of Dropzone.

You can try it like this.

<Dropzone>
  {dropzoneProps => {
    return (
      <div>
        <p>Drop some files here</p>
      </div>
    );
  }}
</Dropzone>;