title: Change color of active button among multiple buttons in React using material ui
body: <p>I am trying to change the color only of a button, which is clicked. And by default the first button to be active. The problem that I have is that in Material UI when I use Button there is a span so I cannot use e.target.name ... because there is no name in the span. This span is created when I type some text between the button tags =&gt; Some title. As well I intend to have some other actions when the button is clicked, except that it should change its color to show, which one is active.
  If there is some way around I will appreciate it. Down below is some code, that I tried, but I do not know what to do in clickedButtonHandler and if it's possible to pass any argument on it when the button is clicked... for example the name.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Container, Box, Button } from &quot;@material-ui/core&quot;;
  import { makeStyles, withStyles } from &quot;@material-ui/styles&quot;;
  
  const StyledButton = withStyles(() =&gt; ({
    root: {
      marginRight: &quot;1rem&quot;,
      width: &quot;25%&quot;,
      padding: &quot;1rem&quot;,
      fontSize: &quot;1.2rem&quot;,
      borderRadius: &quot;1rem&quot;,
      color: &quot;#000&quot;,
      fontWeight: &quot;400&quot;,
      textTransform: &quot;capitalize&quot;
    }
  }))(Button);
  
  const useStyles = makeStyles(() =&gt; ({
    buttonContainerWrapper: {
      display: &quot;flex&quot;,
      justifyContent: &quot;center&quot;
    },
    buttonContainer: {
      backgroundColor: &quot;#ccc&quot;,
      border: &quot;1px solid #000&quot;,
      padding: &quot;1rem&quot;,
      display: &quot;flex&quot;,
      justifyContent: &quot;space-between&quot;
    },
    lastButtonFilter: {
      marginRight: &quot;0rem&quot;
    },
    activeButton: {
      background: &quot;#fc7303&quot;,
      color: &quot;#fff&quot;
    }
  }));
  
  export default function Filter() {
    const classes = useStyles();
    const [activeButton, setActiveButton] = useState({
      first: true,
      second: false,
      third: false,
      fourth: false
    });
  
    const clickedButtonHandler = (e) =&gt; {
      console.log(e.target);
      const { name } = e.target;
      setActiveButton(name);
      console.log(activeButton);
    };
  
    return (
      &lt;Container className={classes.buttonContainerWrapper}&gt;
        &lt;Box className={classes.buttonContainer}&gt;
          &lt;StyledButton
            name=&quot;button-one&quot;
            className={activeButton?.first ? `${classes.activeButton}` : &quot;&quot;}
            onClick={clickedButtonHandler}
          &gt;
            Button One
          &lt;/StyledButton&gt;
          &lt;StyledButton
            name=&quot;button-two&quot;
            className={
              activeButton?.second ? `${classes.activeButton}` : &quot;&quot;
            }
            onClick={clickedButtonHandler}
          &gt;
            Button Two
          &lt;/StyledButton&gt;
          &lt;StyledButton
            name=&quot;button-three&quot;
            className={activeButton?.third ? `${classes.activeButton}` : &quot;&quot;}
            onClick={clickedButtonHandler}
          &gt;
            Button Three
          &lt;/StyledButton&gt;
          &lt;StyledButton
            name=&quot;button-four&quot;
            className={
              activeButton?.fourth ? `${classes.activeButton}` : &quot;&quot;
            }
            onClick={clickedButtonHandler}
          &gt;
            Button Four
          &lt;/StyledButton&gt;
        &lt;/Box&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>
  <p>here is the link to codepan: <a href="https://codesandbox.io/s/awesome-sinoussi-u3o3s" rel="nofollow noreferrer">https://codesandbox.io/s/awesome-sinoussi-u3o3s</a></p>