React-Dropzone image preview not showing
<p>Using react-dropzone (<a href="https://www.npmjs.com/package/react-dropzone" rel="noreferrer">https://www.npmjs.com/package/react-dropzone</a>) and getting files logging to the console, but can't get image preview to populate on state change. Any idea what I'm doing wrong?</p>

<pre><code>export default class JoinForm extends Component {
    constructor(props) {
    super(props)
        this.state = {
            imageFiles: []
    }
}

onDrop(imageFiles) {
    this.setState({
        imageFiles: imageFiles
    })
    console.log(imageFiles)  
}

render() {

    return(
        &lt;form className='join-form' ref='joinForm' autoComplete='off'&gt;
            &lt;Dropzone
                onDrop={this.onDrop}
                className='dropzone'
                activeClassName='active-dropzone'
                multiple={false}&gt;
      &lt;div&gt;Drag and drop or click to select a 550x550px file to upload.&lt;/div&gt;
    &lt;/Dropzone&gt;

            {this.state.imageFiles.length &gt; 0 ? &lt;div&gt;
    &lt;h2&gt;Uploading {this.state.imageFiles.length} files...&lt;/h2&gt;
    &lt;div&gt;{this.state.imageFiles.map((file) =&gt; &lt;img src={file.preview} /&gt; )}&lt;/div&gt;
    &lt;/div&gt; : null}
        &lt;/form&gt;
    )
}
</code></pre>

<p>};</p>