How to solve 'prop type error' for my react-dropzone app - reactjs

Question

I am trying to build an app using react dropzone to handle file uploading. I have been scratching my head about this error for hours now.
Warning: Failed prop type: Invalid prop children of type array
supplied to Dropzone, expected function.
in Dropzone (at MyEditor.js:145)
in MyEditor (at App.js:15)
in div (at App.js:14)
in div (at App.js:10)
in App (at src/index.js:7) function.console.(anonymous function) # index.js:1446 printWarning # checkPropTypes.js:21 checkPropTypes #
checkPropTypes.js:76 validatePropTypes # react.development.js:1716
createElementWithValidation # react.development.js:1809 render #
MyEditor.js:145 finishClassComponent # react-dom.development.js:15119
updateClassComponent # react-dom.development.js:15074 beginWork #
react-dom.development.js:16064 performUnitOfWork #
react-dom.development.js:20084 workLoop #
react-dom.development.js:20125 renderRoot #
react-dom.development.js:20205 performWorkOnRoot #
react-dom.development.js:21162 performWork #
react-dom.development.js:21072 performSyncWork #
react-dom.development.js:21046 requestWork #
react-dom.development.js:20901 scheduleWork #
react-dom.development.js:20714 scheduleRootUpdate #
react-dom.development.js:21409 updateContainerAtExpirationTime #
react-dom.development.js:21435 updateContainer #
react-dom.development.js:21503 ReactRoot.render #
react-dom.development.js:21816 (anonymous) #
react-dom.development.js:21968 unbatchedUpdates #
react-dom.development.js:21291 legacyRenderSubtreeIntoContainer #
react-dom.development.js:21964 render # react-dom.development.js:22039
(anonymous) # index.js:7 ./src/index.js # main.chunk.js:78
webpack_require # bundle.js:782 fn # bundle.js:150 0 # main.chunk.js:161
webpack_require # bundle.js:782 checkDeferredModules # bundle.js:46 webpackJsonpCallback # bundle.js:33 (anonymous) #
main.chunk.js:1
I've tried to add a getRootprops() like it says to do in the docs but I'm still experiencing the breaking issue. Here's a link to the repo where the broken component is visible.

Answer 1

You have to put function inside Dropzone component, as stated on their official docs. And you can see it yourself on the error. children of Drozone need a function to work properly.
I have a working example from my own project:
<Dropzone onDrop={this.onDrop}>
{
({ getRootProps, getInputProps }) => {
return (
<div {...getRootProps()} className="image-dropzone">
<input {...getInputProps()} />
<div className="preview-container">
<div className="preview">
{
!isEmpty(files) ? (
<img src={files[0].preview} alt={files.name} />
) : (
<span>your thumbnail goes here...</span>
)
}
</div>
</div>
</div>
)
}
}
</Dropzone>
This code preview an image on the files prop, after user added the image via react-dropzone.
You can try to adapt to your code.
Basically you need an input inside the function inside Dropzone component, and the input acts like common input with type="file".