How to use some React libraries in a class component

Question

I would like to use React hook and DropZone in a class component. How should I do?

The error

src/components/projects/CreateProject.js Line 19:14: React Hook "useCallback" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks Line 21:11: 'setUploadfile' is not defined no-undef Line 52:102: React Hook "useDropzone" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks Line 53:7: 'onDrop' is not defined no-undef

Search for the keywords to learn more about each error.

class CreateProject extends Component {
    state = {
        title:'',
        content:'',
        uploadfile:'',
        setUploadfile:''
    }

    onDrop = useCallback((acceptedFiles) => {
      if (acceptedFiles.length > 0) {
          setUploadfile(acceptedFiles[0]);
      }
    }, []);

    
    handleChange = (e) =>{
        this.setState({
            [e.target.id]: e.target.value
        })
    }

    handleSubmit = (e) =>{
        e.preventDefault();
        this.props.createProject(this.state)
        this.props.history.push('/')
    }

    handleSubmitImg = (e) =>{
      e.preventDefault()
      //this.props.sampleteFunction()
    };

    

  render() {
   const maxSize = 3 * 1024 * 1024;
  const { acceptedFiles, getRootProps, getInputProps, isDragActive, isDragReject, fileRejections } = useDropzone({
      onDrop,
      accept: 'image/png, image/jpeg, image/gif, image/jpg',
      minSize: 1,
      maxSize,
  });

    const {auth} = this.props

    if(!auth.uid) return <Redirect to="/signin" />
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
            <h5 className="grey-text text-darken-3">
                Create Project
            </h5>
            <div className="input-field">
                <label htmlFor="title">Title</label>
                <input type="text" id="title" onChange={this.handleChange}/>
            </div>

            <div className="input-field">
                <label htmlFor="content">Project Content</label>
                <textarea id="content" className="materialize-textarea" onChange={this.handleChange}></textarea>
            </div>
            <div className="input-field">
                <button className="btn pink lighten-1 z-depth-0">Create</button>
            </div>
        </form>
            <div {...getRootProps()}>
                <input {...getInputProps()} />
                <p>Click</p>
                {this.uploadfile ? <p>File you chose: {this.uploadfile.name}</p> : null}
            </div>
        </div>
    )
  }
}

const matchStateToProps = (state) => {
    return{
        auth: state.firebase.auth
    }
}

const mapDispatchToProps = (dispatch) => {
    return{
        createProject: (project) => dispatch(createProject(project))
    }
}

export default connect(matchStateToProps, mapDispatchToProps)(CreateProject)

Answer 1

You cannot use hooks (such as useCallback or useDropzone) inside a class component. They must be used inside the body of a function component instead.

For this code to work, a few changes must be made. I am supposing you are using the react-dropzone package.

1. Remove setUploadfile from your state

You are trying to do a useState pattern inside a class component. The class component only needs the state declaration and the use of this.setState to make updates.

Remove setUploadfile from your state. Use this.setState({ uploadfile: newValue }) instead.

2. Remove useCallback

The hook useCallback is used inside function components to optimize performance and prevent unnecessary renders (see here). You made a class component, so there's no need to use memoization for the callback function.

onDrop = acceptedFiles => {
  if (acceptedFiles.length > 0) {
    this.setState({ uploadfile: acceptedFiles[0] })
  }
}

3. Use Dropzone component rather than useDropzone hook

In the documentation of react-dropzone there's an alternative for useDropzone hook. The Dropzone component.

Remove the useDropzone hook.

<Dropzone
  onDrop={this.onDrop}
  accept="image/png,image/jpeg,image/gif,image/jpg"
  minSize={1}
  maxSize={maxSize}
>
  {({ getRootProps, getInputProps }) => (
    <div className="container">{/* The rest of your code */}</div>
  )}
</Dropzone>