React Semantic UI: Simple drag and drop file field

Source code viewer
import Dropzone from 'react-dropzone';
 
class ClaimsAddPrivate extends React.PureComponent {
  constructor(props) {
    super(props);
    this.initialState = {
      files: [],
    };
    this.fileInputCallback = this.fileInputCallback.bind(this);
  }
 
  fileInputCallback(acceptedFiles) {
    acceptedFiles.forEach(file => {
      const formData = new FormData();
      formData.append('file', file);
      fetch('/addFile', {
        method: 'POST',
        body: formData,
      })
        .then(response => response.json().then(data => {
          this.setState({files: [...this.state.files, data]});
        }));
    });
  }
 
  render() {
    <Dropzone onDrop={this.fileInputCallback}>
      {({getRootProps, getInputProps}) => (
        <div className="ui center aligned tertiary blue inverted segment" {...getRootProps()}>
          <input {...getInputProps()} />
          <Icon name="cloud upload" size="big" />
          <div>Drag and drop or upload file</div>
        </div>
      )}
    </Dropzone>
    {!_isEmpty(this.state.files) && <List divided verticalAlign="middle">
      {this.state.files.map((file, i) =>
        <List.Item key={i}>
          <List.Icon name="file" />
          <List.Content>
            <a href={file.url}>{file.name}</a>
            <Icon
              link
              color="red"
              name="remove"
              onClick={() => this.setState({files: [...this.state.files].splice(i, 1)})} />
          </List.Content>
        </List.Item>
      )}
    </List>}
  }
 
}
Programming Language: ECMAScript