title: React-bootstrap: Dropdown.item, onSelect returns a null target
body: <p>I am using <a href="/questions/tagged/react-bootstrap" class="post-tag" title="show questions tagged &#39;react-bootstrap&#39;" rel="tag">react-bootstrap</a> and I am implementing a dropdown menu in my react web page. In my dropdown menu, I am calling a <code>handleClick</code> function when button is selected. </p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;Dropdown.Menu&gt;
      &lt;Dropdown.Item name = "baudratestate1200" onSelect={this.handleClick}&gt;1200&lt;/Dropdown.Item&gt;
      &lt;Dropdown.Item name = "baudratestate2400" onSelect={this.handleClick}&gt;2400&lt;/Dropdown.Item&gt;
      &lt;Dropdown.Item name = "baudratestate4800" onSelect={this.handleClick}&gt;4800&lt;/Dropdown.Item&gt;
      &lt;Dropdown.Item name = "baudratestate9600" onSelect={this.handleClick}&gt;9600&lt;/Dropdown.Item&gt;
  &lt;/Dropdown.Menu&gt;
  </code></pre>
  
  <p>Here is my <code>handleClick</code> function:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>handleClick = (eventkey, event) =&gt; {
    console.log(eventkey)
    console.log(event)
  }
  </code></pre>
  
  <p>However, the <code>event.target</code> is null, attached below is the <code>console.log</code> from my client browser:</p>
  
  <pre><code>Class {dispatchConfig: {…}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: ƒ, …}
  nativeEvent: (...)
  type: (...)
  target: null
  </code></pre>
  
  <p>I have tried binding and not-binding the function in the constructor but both have produced null values for event.target</p>
  
  <pre class="lang-js prettyprint-override"><code>this.handleClick = this.handleClick.bind(this);
  </code></pre>
  
  <p>What am I doing wrong here? Any form of concept clarification would be greatly appreciated!</p>