Change the color of a material-ui Button when it's active

Question

I am trying to change the color of a material-ui Button when it's clicked. I have multiple buttons. When I click on a Button, The color changes for all of them at the same time. How can I only change the one that is clicked. I have the following code, but it's not doing the work, it's supposed to do.

   constructor(props){
      super(props);
      this.state={
      videos : data,
      filtered: data,
      color : "primary"
    };
   }

   handleClick = (event) => {
    const value = event.currentTarget.value;
    console.log(event);
    this.setState({
      filtered: this.state.videos.filter(item => { 
          return item.category === value
      }),
      color: "secondary"
    });
  }

  <Button value="java" onClick={this.handleClick} variant="contained" 
   color={this.state.color} >java</Button> 
  <Button value="React" onClick={this.handleClick} 
   variant="contained" color={this.state.color}>React</Button> 
  <Button value="C#" onClick={this.handleClick}  
   variant="contained" color={this.state.color}>C#</Button> 

Answer 1

It looks like this state change is not in the object being passed to setState() , it should be:

this.setState({
    filtered: this.state.videos.filter(item => { 
        return item.category === value
    }),
    Color: "secondary"
});

Answer 2

    handleClick = (event) => {
        const value = event.currentTarget.value;
        this.setState({ filtered: this.state.videos.filter(item => { 
                return item.category === value
            }), {Color: "secondary"}
        })
   }

you just inserted your color inside filter's callback function, just change that it will work

Answer 3

Please check this example:

import React, {useState} from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

export default function ContainedButtons() {
    const [color, setColor] = useState('primary');

    return (
        <div>
            <Button variant="contained" color={color} onClick={() => {setColor('secondary')}}>
                Click Me
            </Button>
        </div>
    );
}