/Javascript/React/How to change style class by using onclick function with multiple buttons in react js

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'));

Source: stackoverflow.com

Similar codes

0 vote126 views1 answer
Use font awesome in react native
Javascript React
3 votes95 views2 answers
React navigation header transparent
Javascript React
47 votes120 views3 answers
How to comment in the react javascript
Javascript React
13 votes118 views4 answers
React native android build apk
Javascript React
0 vote142 views1 answer
Remove duplicate value from map react js
Javascript React
0 vote139 views1 answer
React router dom change default path
Javascript React
0 vote115 views1 answer
Install reactivesearch
Javascript React
0 vote132 views2 answers
React js big calendar
Javascript React
1 vote144 views1 answer
React render html variable
Javascript React
0 vote119 views1 answer
S3 private image getobject react js
Javascript React