setState does not work onDrop

For some reason this.setState is not working properly when onDrop is called. Here is my code:

class App extends Component {

constructor(props){
    super(props);
    this.state= { files: [] };
  }

  onDrop(accepted, rejected){
      this.setState({files: accepted});
      console.log('accepted: '+this.state.files);
      console.log('rejected: '+rejected);
  }

  render() {
    return (
      <div className="App">
        <Dropzone onDrop={this.onDrop}>
          <div>Upload some stuff here </div>
        </Dropzone>
        {this.state.files.length > 0 ? <div>
                <h2>Uploading {this.state.files.length} files...</h2>
                <div>{this.state.files.map((file) => <img src={file.preview} /> )}</div>
                </div> : null}
      </div>
    );
  }
}

1st time i add a file onDrop() outputs this.state.files as undefined . the 2nd time i add a file, onDrop() outputs this.state.files as the previous file uploaded. If i log output this.state.files from another function, this.state.files is ALWAYS empty, even though onDrop() calls the previous result.

This sounds like a bug to me. I’ve tried this.onDrop.bind(this). This also will never update the actual state.

it seems that the state inside onDrop is separate to the state inside the main app.

I know that setState is asynchronous. But that’s meaningless when it’s not updating the actual state.

Very frustrating.

[itsashis4u]

This is because you expect setListOfFiles({files}) to be syncronous. But it is not. You can use useEffect to get the dropped files

[abbasfreestyle]

Thanks @okonet but this isn’t working.

The states are being passed through into onDrop() with bind. But setState does not update the actual state.

this.state.files in render() is still unchanged and still remains empty no matter how many times i add a file.

But weirdly this.state.files show the previous file data INSIDE onDrop() function only