title: Getting id from an event handler that was passed to a button component in React?
body: <p>I have an App component that renders a MenuBar component. In that MenuBar, I render ListItems (from material-ui) and pass the following as a prop:</p>
  
  <pre><code>    onClick = (e) =&gt; {
  
      const id = e.target.id;
      console.log(id);
      console.log('called');
  }
  </code></pre>
  
  <p>the MenuBar component:</p>
  
  <pre><code>    render() {
      const onClick = this.props.onClick;
      const titles = ["Home", "About", "Docket", "Polls", "News"];
      const listItems = titles.map(title =&gt;
          &lt;ListItem button id={title} onClick={onClick} key={title}&gt;
              &lt;ListItemText primary={title} /&gt;
          &lt;/ListItem&gt;);
      return (
          &lt;List
              component="ul"
              className="menu-bar"&gt;
              {listItems}
          &lt;/List&gt;
      );
  }
  </code></pre>
  
  <p>I want to use this title, which I try to retrieve from the event, so that I can render a Home component, or About component, etc, depending on which ListItem is selected. But when I run this and click randomly on some of the ListItems in my browser, the title is only logged to the console sometimes (seemingly randomly). What is the best way for me to access which ListItem was selected, or why is the console logging the title only sometimes?</p>
  
  <p>Here is what I get in the browser console:</p>
  
  <p>Docket</p>
  
  <p>called</p>
  
  <p>called</p>
  
  <p>Polls </p>
  
  <p>called</p>
  
  <p>News </p>
  
  <p>called</p>