CODEWITHSUNDEEP
reactjslistonclickmaterial-uilistitem
user1315621
user1315621

Reputation: 3412

Material-UI: ListItem onClick not called

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?

App.js:

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 (
      <div >
      <Grid container spacing={24}>
        <Grid item xs={3}>
          Column text
        </Grid>
        <Grid item xs={9}>
            <Map/>
        </Grid>

      </Grid>
      </div>

    );
  }
}

export default App;

Map.js:

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 => res.json())
      .then(
        (result) => {
          this.setState({
            sensorsList: {
              isLoaded: true,
              data: Object.keys(result.data).map(key => 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) => {
          this.setState({
            error
          });
        }
      )
  }

  selectSensor(name) {
    console.log(name);
  }

  _renderSensorsList() {
    const {sensorsList} = this.state;

    return sensorsList.isLoaded && (
      <div style={{
        position: 'absolute', 
        zIndex: 1, 
        pointerEvents: 'none', 
        right: 10, 
        top: 10,
        backgroundColor: 'white',
        }}>

      <List component="nav">
        { sensorsList.data.map(key => 
          <ListItem button key={key} onClick={() => this.selectSensor("ciao")} >
            <ListItemText primary={key} />
          </ListItem>
        )}
      </List>

      </div>
    );
  }

  render() {
    const {sensorsList, selectedSensor} = this.state;

    return (
      <div>
        { this._renderSensorsList() }
      </div>
    );
  }
}

export default Map;

Upvotes: 2

Views: 8565

Answers (2)

damjtoh
damjtoh

Reputation: 385

The problem is that in your div's style you are setting pointerEvents: 'none', preventing the click to reach the DOM event listener, remove it and it will work.

<div style={{
        position: 'absolute', 
        zIndex: 1, 
        pointerEvents: 'none', //<---- remove this line
        right: 10, 
        top: 10,
        backgroundColor: 'white',
}}>

Upvotes: 3

AlexZvl
AlexZvl

Reputation: 2302

try replacing this

  _renderSensorsList() {

with arrow function like this 

  _renderSensorsList = () => {

Upvotes: 0

Related Questions