title: Creating anchor with onClick that React handles
body: <p>I have a React Component that renders a <code>&lt;ul&gt;</code> and inserts <code>&lt;li&gt;</code> elements based on state.</p>
  
  <pre><code>class SimpleComponent extends React.Component {
    constructor(props) {
      this.state = { menu_items: [name: "First", id: 10] }
      this.clickMenu = this.clickMenu.bind(this)
    }
    generateLinks() {
      let to_return='';
      for (var i=0;i&lt;this.state.menu_items.length; i++) {
        to_return = to_return + `&lt;li&gt;&lt;a onclick={clickMenu}&gt; ${this.state.menu_item[i]['name']} &lt;/a&gt;&lt;/li&gt;`
       }
       return to_return;
     }
     clickMenu(e) {
       console.log(e.target)
     }
     render() {
       return(
         &lt;ul dangerouslySetInnerHTML={this.generateLinks()}&gt;&lt;/ul&gt;
       )
     }
  }
  </code></pre>
  
  <p>When I click on the Anchor, the console indicates Uncaught ReferenceError: clickMenu not defined.  I've tried using this.clickMenu instead, but nothing occurs.  I've noticed that the rendered anchor looks like:</p>
  
  <pre><code>&lt;a onclick="{menuClick}"&gt;
  </code></pre>
  
  <p>Is there a way to create these anchor elements to have React pick up the onClick definitions rather than passing them to the browser to interpret?</p>