title: ReactJS (with coreui): Dropdown component does not reflect the correct menu click
body: <p>I was trying to build a front-end with ReactJS and coreui component. This is my code where I was trying to implement a &quot;Dropdown&quot; menu:</p>
  <pre class="lang-js prettyprint-override"><code>class DropdownTest extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: null,
      };
    }
  
    handleClick(i) {
      this.setState({ value: i });
      console.log(&quot;clicked &quot; + i + &quot;, this.state.value = &quot; + this.state.value);
    }
  
    renderItem(value) {
      return (
        &lt;CDropdownItem key={value} onClick={() =&gt; this.handleClick(value)}&gt;
          {value}
        &lt;/CDropdownItem&gt;
      );
    }
  
    render() {
      return (
        &lt;CDropdown id=&quot;axes-dd&quot; className=&quot;float-right mr-0&quot; size=&quot;sm&quot;&gt;
          &lt;CDropdownToggle id=&quot;axes-ddt&quot; color=&quot;secondary&quot; size=&quot;sm&quot;&gt;
            Axes
          &lt;/CDropdownToggle&gt;
          &lt;CDropdownMenu&gt;
            {this.renderItem(0)}
            {this.renderItem(1)}
            {this.renderItem(2)}
          &lt;/CDropdownMenu&gt;
        &lt;/CDropdown&gt;
      );
    }
  }
  </code></pre>
  <p>This is the front-end component:</p>
  <p><a href="https://i.stack.imgur.com/aDlxm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aDlxm.png" alt="enter image description here" /></a></p>
  <p>When I want is to keep a variable (let's say <code>state.value</code>) that will keep track of the menu item that I clicked. But when I run the above example, I'm seeing the above code doesn't keep track of the clicking sequence correctly. On the console, I'm getting these outputs --</p>
  <p><a href="https://i.stack.imgur.com/t60Qg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t60Qg.png" alt="enter image description here" /></a></p>
  <p>For example, when I click the menu <code>0</code> for the first time, the console output is <code>clicked 0, this.state.value = null</code>, although I'm printing after updating the state (please see the <code>handleClick(i)</code> function). Again when I click the menu <code>1</code>, the console output is <code>clicked 1, this.state.value = 0</code> and so on. You get what I mean.</p>
  <p>How do I fix this?</p>
  <p>Note: The components <code>CDropdown</code>, <code>CDropdownMenu</code>, <code>CDropdownToggle</code>, <code>CDropdownItem</code> are from the <a href="https://coreui.io/react/docs/components/CDropdown/" rel="nofollow noreferrer">coreui</a> library.</p>