警告：失败的道具类型：提供给`Dropzone`的类型`string`的prop`child`无效，期望的`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

Answer 1

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/

Answer 2

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;