title: React - event.target returns the innerText of the previously clicked element instead of the currently clicked element
body: <p>I created a drop down menu that returns a selected option through an event handler when the option is clicked.</p>
  
  <p>When I click on the option, I target the <code>innerText</code> of that option via <code>event</code>. It looks like this: <code>event.target.innerText</code>. The selected targets value is then used to fill in an 'input' to show the users selected value. Exactly how you expect a <code>&lt;select&gt;</code> input to work. The targets value is also used for filtering listed components, but that is not what I am worried about here.</p>
  
  <p>When the drop down menu component loads, inside of a <code>componentDidMount()</code> method, the state is updated with a default value so that the drop down menus load with the first option pre-populated (this is so that they are not empty before a user selects an option).</p>
  
  <p>When I click on an option to make a selection, the returned <code>event.target.innerText</code> is of the previous selection. So if <code>option 1</code> was the default value when the component mounts, and then I select <code>option 2</code> and <code>console.log</code> the result, the value would be <code>option 1</code>. If I then select another option, <code>option 3</code>, the returned <code>console.log()</code> would be <code>option 2</code>. It's one behind.</p>
  
  <p>In this .gif, you can see that when <code>componentDidMount()</code> fires, it <code>console.log()</code>s the default values of the drop down menu. But when I make a selection, you'll notice the <code>console.log()</code> is only returning the <code>event.target.innerText</code> of the previously selected option.</p>
  
  <p><a href="https://i.stack.imgur.com/Zr4i3.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zr4i3.gif" alt="enter image description here"></a></p>
  
  <p>Here is the component:</p>
  
  <pre><code>class DropDownSelect extends Component {
    constructor(props) {
      const { inputOptions } = props;
      const { option1 } = inputOptions;
      super(props);
  
      this.state = {
        showOptions: false,
        selectionMade: option1
      };
    }
  
    setShowOptions = () =&gt; {
      const { showOptions } = this.state;
      this.setState(prevState =&gt; ({ showOptions: !prevState.showOptions }));
    };
  
    setSelectionMade = event =&gt; {
      const { target } = event;
      event.stopPropagation();
  
      this.setShowOptions();
      this.setState({ selectionMade: target.innerText });
      console.log(this.state.selectionMade);
    };
  
    setDefaultSelectionOnLoad = () =&gt; {
      const { inputOptions } = this.props;
      this.setState({ selectionMade: inputOptions.option1 });
    };
  
    componentDidMount() {
      this.setDefaultSelectionOnLoad();
      console.log(this.state.selectionMade);
    }
  
    render() {
      const { showOptions, selectionMade } = this.state;
      const { inputOptions } = this.props;
  
      const inputOptionsArray = Object.keys(inputOptions);
  
      return (
        &lt;DropDownSelectMenu&gt;
          &lt;DropDownSelectPlaceholder onClick={this.setShowOptions}&gt;
            &lt;p&gt;{selectionMade}&lt;/p&gt;
            &lt;i&gt;
              &lt;FontAwesomeIcon icon={faCaretDown} /&gt;
            &lt;/i&gt;
          &lt;/DropDownSelectPlaceholder&gt;
  
          {showOptions ? (
            &lt;DropDownSelectOptions&gt;
              {inputOptionsArray.map((key, index) =&gt; {
                return (
                  &lt;DropDownOption
                    onClick={event =&gt; {
                      this.setSelectionMade(event);
                    }}
                    key={index}
                  &gt;
                    {inputOptions[key]}
                  &lt;/DropDownOption&gt;
                );
              })}
            &lt;/DropDownSelectOptions&gt;
          ) : null}
        &lt;/DropDownSelectMenu&gt;
      );
    }
  } 
  </code></pre>
  
  <p>The <code>DropDownOption</code> styled component is where the function that updates the selection in the state is added as an <code>onClick</code> handler. Since this component is a child, and you need to click the parent component to open the <code>DropDownOption</code> component, I thought that maybe the event handler was bubbling up and grabbing the <code>event.target</code> value from the parent, so I added <code>event.stopPropagation()</code> to the event handler function <code>setSelectionMade()</code>. This didn't do anything for me. </p>