title: Dropdown onclick isn't getting called when item selected in react
body: <p>The onlick event handler isn't getting called when I select dropdown item.</p>
  
  <p>I am generating dropdown in a loop in <code>componentDidMount()</code> and passing event handler function <strong>"showDataTypeName"</strong> to <code>onclick</code> while generating dropdown but for some reason its not getting called. Any idea why this is failing?</p>
  
  <p>Below is my component where I am generating dropdown</p>
  
  <pre><code>export class GenerateParams extends Component{
      constructor(props){
          super(props);
          this.state = {
              dataTypeName: "Select Type",
              rows: []
          }
      }
  
      componentDidMount(){
          let dataTypes = [];
          let content = this.state.rows.slice();    
          if(typeof this.props.apiPropertiesSuccess != 'undefined' &amp;&amp; this.props.apiPropertiesSuccess.size &gt; 0){
              this.props.apiPropertiesSuccess.map((type, i) =&gt; {
                  dataTypes.push(&lt;li key={type.get('id')}&gt;&lt;a onClick = {this.showDataTypeName(type.get('id'), type.get('name'))}&gt; {type.get('name')} &lt;/a&gt;&lt;/li&gt;)
              });
          }
  
  
          for(let i=0; i &lt; this.props.params.length; i++){
              content.push(&lt;div&gt;
                  &lt;div className="col-md-6"&gt;
                      &lt;TextInput size="medium" value={this.props.params[i]} readOnly/&gt;
                  &lt;/div&gt;
                  &lt;div className="col-md-6"&gt;
                      &lt;div className="dropdown"&gt;
                          &lt;button className="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"&gt;{this.state.dataTypeName}
                              &lt;span className="caret"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;ul className="dropdown-menu"&gt;
                              {dataTypes}
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;)
          }
  
          this.setState({rows:content})
      }
      showDataTypeName = (id, name) =&gt; {
          console.log("id, name", id, name)
          this.props.handleDataTypes(id, name);
          this.setState({
              dataTypeName: name
          });
      }
  
      render(){
          const {params, apiPropertiesSuccess} = this.props;     
  
          return(
              &lt;div&gt;
                  {this.state.rows}
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>Note: Accepting xadm's answer because his solution was posted first. Thanks to @UtkarshPramodGupta and @anshul as well. </p>