Drum Machine proyect, how to change buttons color separately

Hi, Im building my drum machine and ive been having issues trying to change button colors everytime they are clicked separately Im trying to avoid creating separate color properties in this.state for each separate div button and I was wandering if there is any way that I could acheive so with only one color property. Im using an onclick event that changes the color property in state. unfortunatley when one of the pads is clicked the rest of the buttons colors also change because their background prop in style is set to have the value of this.state.color. Is there any way that I could change color for each button separately without using to much code?

Any suggestions are kindly appreciated.

here is my codepen :

https://codepen.io/tonytony92/pen/dyozgXG

and code so far:

class MyApp extends React.Component{
  constructor(props){
    super(props)
    this.state={
      color:'green',
      buttonColor1:"green"
    }
    this.changeStyle=this.changeStyle.bind(this)
  this.clearColor=this.clearColor.bind(this)
  }

  
  changeStyle(){
    
    if(this.state.color==='green'){
      this.setState({
        color:'yellow'
      })
      setTimeout(() =>this.clearColor(),150)
    
    }
    
  }
  
  clearColor(){
    this.setState({
      color:"green"
    })
  }

render(){
  const buttonStyle={
  height:"130px",
  border:"2px solid black",
  background:this.state.color
}
  return(
    <div>
    <div style={{width:"800px",height:"400px",backgroundColor:"green",display:"flex",flexDirection:"row"}}>
      <div style={{width:"450px", backgroundColor:"white",display:"flex",flexDirection:"column"}}>
        <div style={{width:"150px",height:"400px",backgroundColor:"blue",display:"flex",flexDirection:"column"}}>
          <div className="button" id="button1" style={buttonStyle} onClick={this.changeStyle}></div>
          <div className="button" id="button2" style={buttonStyle} onClick={this.changeStyle}></div>
          <div className="button" id="button3" style={{height:"130px", border:"2px solid black", }}></div>
        
        </div>
       
        
      </div>
       <div id='controler' style={{width:"350px", height:"400px", backgroundColor:"blue", display:"flex",flexDirection:"column", alignItems:"center",justifyContent:"center" }}>
         <div id='display' style={{width:"150px",height:"70px", backgroundColor:"white"}}></div>
        </div>
      </div>
      
    </div>
  )
}
}



ReactDOM.render(<MyApp />,document.getElementById("root"))

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

So you are wanting each button to have its own different color when the button is clicked?

I might suggest to you that the buttons manage their own state using a custom Button component. You could pass a prop to the button for the colors you want to use for the normal state and the clicked state. Then you would have a click event handler for the Button component.

thankyou randell , its working now. Ill use the backticks in the future