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

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.

mfakhrusy mfakhrusy · Accepted Answer · 2019-02-21T23:57:18

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".

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

1 Answers