title: Change State Inside a Function
body: <h1>How do you change state inside a function ?</h1>
  <p>I'm trying to change the state of selectedFile from null to the event.target.files[0] but it's not working inside the onChangeHandler function.</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  export default class Comp1 extends Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedFile: null,
      };
    }
  
    onChangeHandler = event =&gt; {
      console.log(event.target.files[0]);   // &lt;--THIS WORKS //
      console.log(this.state.selectedFile); // &lt;-- THIS WORKS //
      this.setState({
        selectedFile: event.target.files[0]
      }); // THIS DOES NOT WORK //
      console.log(this.state.selectedFile); // selectedFile did not update state //
  
    };
    render() {
      return (
        &lt;div className=&quot;ui placeholder segment&quot;&gt;
          &lt;div className=&quot;ui icon header&quot; /&gt;
          &lt;input
            type=&quot;file&quot;
            className=&quot;file&quot;
            id=&quot;file&quot;
            onChange={this.onChangeHandler}
          /&gt;
          &lt;label htmlFor=&quot;file&quot;&gt;
            &lt;div className=&quot;button&quot;&gt;Press&lt;/div&gt;
          &lt;/label&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>