how to change style class by using onclick function with multiple buttons in react js
/*
* A simple React component
*/
class Button extends React.Component {
constructor(){
super();
this.state = {
color_black: true,
}
}
changeColor(){
this.setState({color_black: !this.state.color_black})
}
render(){
let bgColor = this.state.color_black ? this.props.color : this.props.color2
return (
<div>
<button style={{backgroundColor: bgColor}} onClick={this.changeColor.bind(this)}>Button1</button>
</div>
)
}
}
class Application extends React.Component {
render(){
return (
<div>
<Button color="blue" color2="red"/>
<Button color="black" color2="white"/>
</div>
)
}
}
/*
* Render the above component into the div#app
*/
React.render(<Application />, document.getElementById('app'));