Search code examples
reactjsreact-dropzone

react-dropzone child icon not changing on state change

I have a react project and I am using the react-dropzone component: 

import Dropzone from 'react-dropzone';

I want to make it stateful and show different images and text based on the state. I defined my states as: 

const status = {
  ready: 'ready',
  preview: 'preview',
  error: 'error',
  requested: 'requested',
  success: 'success',
  failed: 'failed',
};

The state can change based on user actions (so when they drag a file onto the dropzone I update status in state as follows: 

onDrop(acceptedFiles, rejectedFiles) {
  // do some stuff here...
  this.setState({ status: status.preview });

}

My render method is a three step process: 1. the actual render methos

render() {
const config = {
  iconFiletypes: ['.xlsx'],
  showFiletypeIcon: true,
};

return (
  <div style={{ marginBottom: '30px' }}>
    <Dropzone
      config={config}
      onDrop={files => this.onDrop(files)}
      //className="dropzone"
      multiple={false}
    >
      {this.renderDropZoneContent()}
    </Dropzone>
  </div>
);

}

choose what to render based on state: 

renderDropZoneContent() {
  switch (this.state.status) {
    case status.ready:
      return this.renderReadyState();
    case status.preview:
      return this.renderPreviewState();
    // and on down for each state / status + default case...
  }
}

and finally the code to render each case as functions: 

renderPreviewState() {
  return (
    <div style={{ marginTop: '35px', textAlign: 'center' }}>
    <i className="far fa-file-excel" style={{ verticalAlign: 'middle', fontSize: '50px' }} />
    {/* There is more jsx here but I removed it for clarity */}
  </div>
  );
}

renderReadyState() {
  return (
    <div style={{ marginTop:'35px', textAlign:'center'}>
      <i className="fas fa-cloud-upload-alt" style={{ verticalAlign: 'middle', fontSize: '50px' }} />
  </div>
);

}

Nothing too crazy. My problem is that as the state changes, the text updates but the icon does not. This is an interesting problem because the logic of the application works, but its the specific element that does not get updated. Even more interesting is that I tried wrapping the entire return in another div and got the error: Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. I'm banging my head against the wall. If anyone has come across this before and have any tips it is greatly appreciate!!

Solution

  • Probably a conflict with how Font Awesome and React handle rendering.

    If you are using React we recommend the react-fontawesome package or Web Fonts with CSS.

    https://fontawesome.com/how-to-use/on-the-web/using-with/react