title: this.state.file.name not rendering as a react element
body: <p>I have a drag and drop field (called <code>react-dropzone</code>) that <code>setState</code> of a <code>file</code>.</p>
  
  <p>I want the <code>file.name</code> to be rendered in the browser.</p>
  
  <p>When tested, it produces no errors nor results. I can get other states to render in the normal way. Any suggestions?</p>
  
  <p>Code:</p>
  
  <pre><code>class Home extends Component {
  state = {
  fileName: {}
  };
  
  handleOnDrop = file =&gt; {
  this.setState({ file });   
  };
  
  render() {
  return (
  &lt;div&gt;
  &lt;Dropzone onDrop={this.handleOnDrop} &lt;/Dropzone&gt;
  
  &lt;h3&gt;{this.state.file.name}&lt;/h3&gt;
  
  &lt;/div&gt;
  );}}
  
  export default Home;
  </code></pre>
  
  <p>Thanks!</p>
  
  <p>EDIT: The answer is that I was trying to pass a full array to a value not set up to take an array. In this case, I needed to pass a single element (file name) from file array to the state.</p>