title: Material-UI: ListItem onClick not called
body: <p>I am working with React and Material-UI. I am trying to display a list and call a function when one of the items of the list is clicked. 
  The code below is a simplified version of my code, but it should contain all the lines concerning the issue.
  The onClick function is apparently never called. What am I missing?</p>
  
  <p>App.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import Grid from '@material-ui/core/Grid';
  import Map from './Map.js';
  
  class App extends Component {
  
    render() {
  
      return (
        &lt;div &gt;
        &lt;Grid container spacing={24}&gt;
          &lt;Grid item xs={3}&gt;
            Column text
          &lt;/Grid&gt;
          &lt;Grid item xs={9}&gt;
              &lt;Map/&gt;
          &lt;/Grid&gt;
  
        &lt;/Grid&gt;
        &lt;/div&gt;
  
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Map.js:</p>
  
  <pre><code>import React from 'react';
  import List from '@material-ui/core/List';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemText from '@material-ui/core/ListItemText';
  
  
  class Map extends React.Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        sensorsList: {
          isLoaded: false,
          data: null,
        },
      };
    }
  
    componentDidMount() {
      // retrieve list of sensors
      fetch("https://api-of-things.plenar.io/api/sensors?size=10000")
        .then(res =&gt; res.json())
        .then(
          (result) =&gt; {
            this.setState({
              sensorsList: {
                isLoaded: true,
                data: Object.keys(result.data).map(key =&gt; result.data[key].path),
              }
            });
          },
          // Note: it's important to handle errors here
          // instead of a catch() block so that we don't swallow
          // exceptions from actual bugs in components.
          (error) =&gt; {
            this.setState({
              error
            });
          }
        )
    }
  
    selectSensor(name) {
      console.log(name);
    }
  
    _renderSensorsList() {
      const {sensorsList} = this.state;
  
      return sensorsList.isLoaded &amp;&amp; (
        &lt;div style={{
          position: 'absolute', 
          zIndex: 1, 
          pointerEvents: 'none', 
          right: 10, 
          top: 10,
          backgroundColor: 'white',
          }}&gt;
  
        &lt;List component="nav"&gt;
          { sensorsList.data.map(key =&gt; 
            &lt;ListItem button key={key} onClick={() =&gt; this.selectSensor("ciao")} &gt;
              &lt;ListItemText primary={key} /&gt;
            &lt;/ListItem&gt;
          )}
        &lt;/List&gt;
  
        &lt;/div&gt;
      );
    }
  
    render() {
      const {sensorsList, selectedSensor} = this.state;
  
      return (
        &lt;div&gt;
          { this._renderSensorsList() }
        &lt;/div&gt;
      );
    }
  }
  
  export default Map;
  </code></pre>