Warning: Failed prop type: Invalid prop `children` of type `string` supplied to `Dropzone`, expected `function`

Question

I am using simple Drag and Drop function via Dropzone but Somehow having this error of "Warning: Failed prop type: Invalid prop children of type string supplied to Dropzone, expected function." I have no idea what it is Na d I have checked the problem doesn't lie anywhere else other than this page

import React, { Component } from "react";

import Dropzone from "react-dropzone";

const MaxSize = 1000000000; //
class DragAndDrop extends Component {
  handleOnDrop = (files, rejectedFiles) => {
    console.log(files);
    console.log("rejected files are:", rejectedFiles);
    if (rejectedFiles && rejectedFiles.length > 0) {
      const currentRejectFile = rejectedFiles[0];
      const currentRejectFileType = currentRejectFile.type;
      const currentRejectFileSize = currentRejectFile.size;
      if (currentRejectFileSize > MaxSize) {
        alert(
          "This file is not allowed. " +
            currentRejectFileSize +
            currentRejectFileType +
            " too large"
        );
      }
    }

    if (files && files.length > 0) {
      const currentFile = files[0];
      const currentFileType = currentFile.type;
      const currentFileSize = currentFile.size;
      if (currentFileSize > MaxSize) {
        alert(
          "This file is not allowed. " +
            currentFileSize +
            currentFileType +
            " too large"
        );
      }
    }
  };

  render() {
    return (
      <div>
        <h1>Drop </h1>
        <Dropzone
          onDrop={() => this.handleOnDrop()}
          multiple={false}
          maxSize={MaxSize}
        >
          Drop image here or click to upload
        </Dropzone>
      </div>
    );
  }
}

export default DragAndDrop;

What I want is a simple drap and drop or select and push some image

try wrapping the text inside of a span to fix your immediate problem. long term, you might try contacting the library and having them remove the proptype for children, since `string` is valid for children. i have opened an issue with the repo about this https://github.com/react-dropzone/react-dropzone/issues/820 since strings are perfectly valid as children — r3wt, Apr 15 '19 at 15:48

score 2 · Answer 1 · answered Apr 17 '19 at 18:25

Actually It didn't work as they changed the DOCS or maybe something else but I had to change all the code and replace it with this

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


const maxSize = 1048576; //1mb
class DragAndDrop extends Component {
  onDrop = acceptedFiles => {
    console.log(acceptedFiles);
  };
  render() {
    return (
      <div>
        <Dropzone
          onDrop={this.onDrop}
          accept="image/png, image/gif image/jpg"//whatever the file type needed
          minSize={0}
          maxSize={maxSize}
          multiple
        >
          {({
            getRootProps,
            getInputProps,
            isDragActive,
            isDragReject,
            rejectedFiles
          }) => {
            const isFileTooLarge =
              rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
            return (
              <div {...getRootProps()}>
                <input {...getInputProps()} />
                {isDragActive
                  ? "Drop it when it's hot!"
                  : "Click me or drag a file to upload!"}
                {isDragActive && !isDragReject && "Drop it like it's hot!"}
                {isDragReject && "File type not accepted, sorry!"}
                {isFileTooLarge && (
                  <div>File is too large.</div>
                )}
              </div>
            );
          }}
        </Dropzone>
      </div>
    );
  }
}
export default DragAndDrop;

score -2 · Answer 2 · answered Apr 15 '19 at 17:27

Try the following:

<Dropzone
    onDrop={() => this.handleOnDrop()}
    multiple={false}
    maxSize={MaxSize}
>
    { () => Drop image here or click to upload }
</Dropzone>

Here is a useful link: https://www.robinwieruch.de/react-render-props-pattern/

Warning: Failed prop type: Invalid prop `children` of type `string` supplied to `Dropzone`, expected `function`

2 Answers2