Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

• [x ] I found a bug
• I want to propose a feature

What is the current behavior? When trying to use the “Class Component” example code I’m seeing Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen... when rendering the page.
Class Component

...
<Dropzone
  multiple={false}
  accept={acceptedTypes}
  onDrop={this.onDrop}
>
  {({getRootProps, getInputProps}) => (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
    </section>
  )}
</Dropzone>
...

I’ve also tried to create a functional component using the hooks example functional component

import React            from 'react'
import { useDropzone }  from 'react-dropzone'

const ImageDropzone = ({ multiple, accept, onDrop }) => {
  const { getRootProps, getInputProps } = useDropzone({ multiple, accept, onDrop })

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some files here, or click to select files</p>
    </div>
  )
}

export default ImageDropzone

I get the same error as above.

What is the expected behavior?

I expect the page to load with the dropzone div showing.

Please mention other relevant information such as the browser version, Operating System and react-dropzone version. Browser version: FF - 66.0.2, Chromium - 73.0.3683.103 OS: openSUSE Tumbleweed react-dropzone: 10.1.3 react & react-dom: 16.8.6

I’m also running this is a dotnet core project using Reactjs.net I’m using reactjs.net: 4.1.1 which they’ve stated works with react hooks. They’re using an internal version of react 16.8.4

I’m also bundling this with webpack : 4.30.0

I’m new to hooks (like everyone haha) but old to react. I believe I’ve got all the correct versions and I’m setting things up correctly. Any help will be much appreciated.

[rolandjitsu]

Please provide an example reproducing your issue. The example we have at react-dropzone.js.org works just fine.

[seth-seikosoft]

@rolandjitsu I’m sorry I should have thought about that… #facepalm haha! (sandbox)

ok I’ll hangout until that PR gets merged in and come back to this feature. Thank you again for your reply and you’re work on this project!