Prop spreading is forbidden - React Dropzone

Question

In one of projects i use drag-and-drop for this solution i select React Dropzone library. The component works fine, but while building the project I have warnings warning Prop spreading is forbidden react / jsx-props-no-spreading. How can the error be resolved?

FileUpload

const dropzoneRef = createRef();
const openDialog = () => {
  if (dropzoneRef.current) {
    dropzoneRef.current.open()
  }
};

<Dropzone ref={dropzoneRef} noClick noKeyboard>
  {({getRootProps, getInputProps, acceptedFiles}) => {
    return (
      <div className="container">
        <div {...getRootProps({className: 'dropzone'})}>
          <input {...getInputProps()} /> //Prop spreading is forbidden
          <p>Drag 'n' drop some files here</p>
          <button
            type="button"
            onClick={openDialog}
          >
            Open File Dialog
          </button>
        </div>
        <aside>
          <h4>Files</h4>
          <ul>
            {acceptedFiles.map(file => (
              <li key={file.path}>
                {file.path} - {file.size} bytes
              </li>
            ))}
          </ul>
        </aside>
      </div>
    );
  }}
</Dropzone>

Documentation

Answer 1

this is a eslint rule specified to create more transparency to what is being passed down as props. you can disable any eslint rule eventually. It's up to you, and your team, to decide if a given rule should be turned off. if that's the case, you can go to your eslint file and at rules include "react/jsx-props-no-spreading": off.

now, if you want to reinforce this rule you need to specify exactly what props are passing down, instead of spreading like:

const dropzoneRef = createRef();
const openDialog = () => {
  if (dropzoneRef.current) {
    dropzoneRef.current.open()
  }
};

<Dropzone ref={dropzoneRef} noClick noKeyboard>
  {({getRootProps, getInputProps, acceptedFiles}) => {
    const divProps = getRootProps({className: 'dropzone'})
    const inputProps = getInputProps()
    // you could destructure instead, if the keys you extract don't collide.
    // if they do collide (like className) and you want to destructure you would need to rename same key names like:
    // const { first: inputFirst, second: inputSecond } = getInputProps()

    return (
      <div className="container">
        <div propFirst={ divProps.first } propSecond={ divProps.second } >
          <input propFirst={ inputProps.first } propSecond={ inputProps.second } />
          <p>Drag 'n' drop some files here</p>
          <button
            type="button"
            onClick={openDialog}
          >
            Open File Dialog
          </button>
        </div>
        <aside>
          <h4>Files</h4>
          <ul>
            {acceptedFiles.map(file => (
              <li key={file.path}>
                {file.path} - {file.size} bytes
              </li>
            ))}
          </ul>
        </aside>
      </div>
    );
  }}
</Dropzone>