title: How to change the style of a ListItem on click?
body: <p>I'm using Material UI and React for a project, and I have a component, that roughly looks like this:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { List, ListItem } from 'material-ui';
  import PropTypes from 'prop-types';
  
  class MyComp extends Component {
      constructor(props) {
          super(props);
  
          this.onClickMethod = this.onClickMethod.bind(this);
      }
  
      onClickMethod() {
         // removed for brevity
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;List&gt;
                      {this.props.myData.map(pp =&gt; {
                          return (
                              &lt;ListItem key={pp.name}
                                        style={styles.listItem}
                                        primaryText={pp.name}
                                        onClick={this.onClickMethod}
                              /&gt;
                          )
                      })}
                  &lt;/List&gt;
              &lt;/div&gt;
          );
      }
  }
  
  const styles = {
      listItem: {
          // removed for brevity, includes some styles
      },
      listItemClicked: {
          // removed for brevity, includes different styles than the ones in listItem
      },
  };
  
  MyComp.propTypes = {
      myData: PropTypes.array.isRequired,
  };
  
  export default MyComp;
  </code></pre>
  
  <p>Now the point is that I want initially all my ListItems to have the same style, namely the styles inside the <code>styles.listItem</code> object property. Then, if the user clicks a certain ListItem I want its style to change to the styles that are inside the <code>styles.listItemClicked</code> object property. Though, the rest of the unclicked ListItems should not change their style. Additionally, if the user has already clicked a ListItem and decides to click another ListItem, then I want the previously clicked ListItem to change its style to the default one that is inside <code>styles.listItem</code> and the newly clicked ListItem to get the <code>styles.listItemClicked</code> styles. So that, at any time only zero (initially) or one of the ListItems have the styles inside the <code>styles.listItemClicked</code>. Any ideas how to achieve this in React?</p>