title: React Material UI ListItem Click
body: <p>I want to create a country list that the ListItems in it are clickable and each ListItem has an icon near to text when clicked. I created a list and I implemented the clickable property of lists. But, when I click one list item in the list, I cannot select the other item in 1 click, it first deselects the previous one and then selects the other. This is the part of the code that my implementation is included:</p>
  <pre><code>class CountryList extends Component {
    constructor(props) {
      super(props);
      this.state = {clicked: false};
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      this.setState(state =&gt; ({
        clicked: !state.clicked
      }));
    }
  
    render() {
      const {classes} = this.props;
      const { clicked } = this.state;
  
      let listItems = myList.map((item) =&gt;
        &lt;&gt;
          &lt;ListItem className={ clicked ? classes.listItemClicked : classes.listItemNotClicked }
            onClick={this.handleClick} classes={classes.ListItem} button key={item.id}&gt;
          
              {clicked ? 
              &lt;ListItemIcon&gt;&lt;DoneIcon style={{ color: 'rgb(239, 239, 239)', fontSize: '2.2rem' }}/&gt;&lt;/ListItemIcon&gt;
             : &lt;ListItemIcon&gt;&lt;DoneIcon style={{ display: 'none', color: 'rgb(239, 239, 239)', fontSize: '2.2rem', backgroundColor: 'rgb(239, 239, 239)' }}/&gt;&lt;/ListItemIcon&gt;}
  
             &lt;ListItemText classes={{primary: classes.listItemText}} primary={item.value} /&gt;
         &lt;/ListItem&gt;
         &lt;Divider /&gt; 
        &lt;/&gt;
      );
  
      return (
        &lt;List className={classes.list}&gt;{listItems}&lt;/List&gt;
      );
    }
  }
  
  
  const myList = [
    {id: 1, value: 'Albania'}, {id: 2, value: 'Austria'}, {id: 3, value: 'Belarus'}, {id: 4, value: 'Belgium'}, 
    {id: 5, value: 'Bosnia'}, {id: 6, value: 'Bulgaria'}, {id: 7, value: 'Croatia'}, {id: 8, value: 'Cyprus'}, 
    {id: 9, value: 'Czech'}, {id: 10, value: 'Denmark'}, {id: 11, value: 'Estonia'}, {id: 12, value: 'Finland'}, 
    {id: 13, value: 'France'}, {id: 14, value: 'Germany'}, {id: 15, value: 'Greece'}, {id: 16, value: 'Hungary'}, 
    {id: 17, value: 'Iceland'}, {id: 18, value: 'Ireland'}, {id: 19, value: 'Italy'}, {id: 20, value: 'Latvia'}, 
    {id: 21, value: 'Lithuania'}, {id: 22, value: 'Luxembourg'}, {id: 23, value: 'Macedonia'}, 
    {id: 24, value: 'Malta'}, {id: 25, value: 'Moldova'}, {id: 26, value: 'Montenegro'}, 
    {id: 27, value: 'Netherlands'}, {id: 28, value: 'Norway'}, {id: 29, value: 'Pakistan'}, 
    {id: 30, value: 'Poland'}, {id: 31, value: 'Portugal'}, {id: 32, value: 'Romania'}, {id: 33, value: 'Russia'}, 
    {id: 34, value: 'Serbia'}, {id: 35, value: 'Slovakia'}, {id: 36, value: 'Slovenia'}, 
    {id: 37, value: 'Spain'}, {id: 38, value: 'Sweden'}, {id: 39, value: 'Switzerland'}, {id: 40, value: 'Turkey'}, 
    {id: 41, value: 'Ukraine'}, {id: 42, value: 'Others'}
  ];
  </code></pre>
  <p>This is the code in App.js file:</p>
  <pre><code>&lt;CountryList myList={myList} /&gt;
  </code></pre>
  <p>Also, I added an icon before the text. When I click 1 item, it shows the icon but, it also shows another element icon if my mouse is on it. I want to show the icon of the clicked element. How can I achieve this?</p>
  <p>This is the screenshot:</p>
  <p><a href="https://i.stack.imgur.com/ITgcZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ITgcZ.png" alt="enter image description here" /></a></p>
  <p>If you look at carefully, there is an icon next to Belgium.</p>
  <p>This is the link for the code in codesandbox: <a href="https://codesandbox.io/s/gifted-snow-5p1gd?file=/src/Country.js" rel="nofollow noreferrer">https://codesandbox.io/s/gifted-snow-5p1gd?file=/src/Country.js</a></p>