Component not re rendering even after calling the setState

Question

I have a react component in which user can upload Image and he's also shown the preview of uploaded image. He can delete the image by clicking delete button corresponding to Image. I am using react-dropzone for it. Here's the code:

class UploadImage extends React.Component {
  constructor(props) {
    super(props);
    this.onDrop = this.onDrop.bind(this);
    this.deleteImage = this.deleteImage.bind(this);
    this.state = {
      filesToBeSent: [],
      filesPreview: [],
      printCount: 10,
    };
  }

  onDrop(acceptedFiles, rejectedFiles) {
    const filesToBeSent = this.state.filesToBeSent;
    if (filesToBeSent.length < this.state.printCount) {
      this.setState(prevState => ({
        filesToBeSent: prevState.filesToBeSent.concat([{acceptedFiles}])
      }));
      console.log(filesToBeSent.length);
      for (var i in filesToBeSent) {
        console.log(filesToBeSent[i]);
        this.setState(prevState => ({
          filesPreview: prevState.filesPreview.concat([
            <div>
              <img src={filesToBeSent[i][0]}/>
              <Button variant="fab" aria-label="Delete" onClick={(e) => this.deleteImage(e,i)}>
                <DeleteIcon/>
              </Button>
            </div>
          ])
        }));
      }
    } else {
      alert("you have reached the limit of printing at a time")
    }
  }

  deleteImage(e, id) {
    console.log(id);
    e.preventDefault();
    this.setState({filesToBeSent: this.state.filesToBeSent.filter(function(fid) {
        return fid !== id
    })});
}

  render() {
    return(
      <div>
        <Dropzone onDrop={(files) => this.onDrop(files)}>
          <div>
            Upload your Property Images Here
          </div>
        </Dropzone>
        {this.state.filesToBeSent.length > 0 ? (
          <div>
            <h2>
              Uploading{this.state.filesToBeSent.length} files...
            </h2>
          </div>
        ) : null}
        <div>
          Files to be printed are: {this.state.filesPreview}
        </div>
      </div>
    )
  }
}

export default UploadImage;

My Question is my component is not re-rendering even after adding or removing an Image. Also, I've taken care of not mutating state arrays directly. Somebody, please help.

Answer 1

Try like this, I have used ES6

.