title: ReactJS - render file name in text when selected file
body: <p>Creating app to upload files from local directory, it was a successful for me. Until the part where I start add some styles and features, I've encounter some issues. after creating connection between <code>&lt;input&gt;</code> + <code>&lt;label&gt;</code>.</p>
  
  <pre><code>&lt;input
    id="file"
    type="file"
    name="selectedFile"
    onChange={this.onChange}
  /&gt;
  &lt;label htmlFor="file"&gt;{file}&lt;/label&gt;
  </code></pre>
  
  <p>The goal was to have text render on label tag instead of actual input following <code>onChange</code> event function. </p>
  
  <p>Following ternary conditional with the <code>fileName</code> (from state) and <code>file</code>, they both are set at null as default. Since no file is been selected, the condition is set at false and text "Choose a file" will display on <code>&lt;label&gt;</code>. </p>
  
  <pre><code>render() {
    const { fileName } = this.state;
      let file = null;
  
      file = fileName 
        ? ( &lt;span&gt;File Selected - {fileName[0]}&lt;/span&gt;) 
        : ( &lt;span&gt;Choose a file...&lt;/span&gt; );
  </code></pre>
  
  <p>Anytime user select on <code>&lt;label&gt;</code> painted "Choose a file" text. it triggers <code>onChange</code> function to have file directory pop up at front of browser. Once file is selected from list, the condition becomes true. And should paint actual file name on <code>&lt;label&gt;</code> <em>eg <strong>something.jpg</em></strong>...</p>
  
  <pre><code>&lt;label htmlFor="file"&gt;{file}&lt;/label&gt;
  </code></pre>
  
  <p>I didn't get any, it wasn't successful for me... However, I've  strong suspect it has something to do with this syntax <code>fileName[0]</code>...</p>
  
  <pre><code>&lt;span&gt;File Selected - {fileName[0]}&lt;/span&gt;)
  </code></pre>
  
  <p>I may have it wrong. Any suggestions? Thanks in advance</p>
  
  <p>Here's full syntax...</p>
  
  <pre><code>export default class Form extends Component {
    state = {
       fileName: '',
    };
  
    onChange = e =&gt; {
      switch (e.target.name) {
        case 'fileName':
          this.setState({ fileName: e.target.files[0] });
        break;
        default:
          this.setState({ [e.target.name]: e.target.value });
       }
    };
  
  render(){
     const { fileName } = this.state;
     let file = null;
  
     file = fileName 
        ? ( &lt;span&gt;File Selected - {fileName[0]}&lt;/span&gt;) 
        : ( &lt;span&gt;Choose a file...&lt;/span&gt; );
  
     return(
        &lt;form onSubmit={this.onSubmit}&gt;
           &lt;div&gt;
              &lt;input
                 id="file"
                 type="file"
                 name="selectedFile"
                 onChange={this.onChange}
              /&gt;
              &lt;label htmlFor="file"&gt;{file}&lt;/label&gt;
              &lt;/div&gt;
          &lt;/form&gt;
       );
    }
  }
  </code></pre>