title: How to change the color of avatar based on onclick in reactjs?
body: <p>I have material ui avatar which take colors(pink/green) from styles.The problem arise when, i need to change the color from pink to green based on onclick. I tried to keep the color name in tate,but its not working,</p>
  
  <pre><code>import React from 'react';
  import { withStyles } from '@material-ui/core/styles';
  import { green, pink } from '@material-ui/core/colors';
  import Avatar from '@material-ui/core/Avatar';
  import FolderIcon from '@material-ui/icons/Folder';
  import PageviewIcon from '@material-ui/icons/Pageview';
  import AssignmentIcon from '@material-ui/icons/Assignment';
  
  const styles = (theme) =&gt; ({
    root: {
      display: 'flex',
      '&amp; &gt; *': {
        margin: theme.spacing(1),
      },
    },
    pink: {
      color: theme.palette.getContrastText(pink[500]),
      backgroundColor: pink[500],
    },
    green: {
      color: '#fff',
      backgroundColor: green[500],
    },
  });
  
  class IconAvatars extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
        color:""
      }
    }
  
  
    render(){
  console.log(this.state.color)
  const {classes} = this.props;
    return (
      &lt;div className={classes.root}&gt;
        &lt;Avatar className={classes.pink} &gt;
         &lt;div onClick=''&gt;M&lt;/div&gt;
        &lt;/Avatar&gt;
      &lt;/div&gt;
    );
  }
  }
  export default withStyles(styles)(IconAvatars)
  
  
  </code></pre>
  
  <p>Its working fine with this code</p>
  
  <pre><code>  &lt;div className={classes.root}&gt;
        &lt;Avatar className={classes.pink} &gt;
         &lt;div onClick=''&gt;M&lt;/div&gt;
        &lt;/Avatar&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>But I want to change  the color from pink to green based on onclick</p>