Breaking News: Grepper is joining You.com. Read the official announcement!

how to change style class by using onclick function with multiple buttons in react js

Fantastic Fly answered on April 29, 2021 Popularity 3/10 Helpfulness 1/10

answer 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

Comment

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

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: class function javascript onclick using

Link to this answer
Share Copy Link

Contributed on Apr 29 2021

Fantastic Fly

0 Answers Avg Quality 2/10

how to change style class by using onclick function with multiple buttons in react js

Contents

More Related Answers

how to change style class by using onclick function with multiple buttons in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.