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

onclick set background color react

Usama Ashraf answered on August 26, 2022 Popularity 9/10 Helpfulness 2/10

answer onclick set background color react

onclick set background color react

Comment

//HTML
<div id="app">
</div>

//CSS
.container {
  display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
}
.buttonTrue {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #000;
  background-color: yellow;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.buttonFalse {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}


//JS
class Button extends React.Component {
  constructor(props){
    super(props)
    this.state ={
      button: true
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    this.setState({
      button:!this.state.button
    })
  }
  render(){
    return (
    <div className="container">
      <button className={this.state.button ? "buttonTrue": "buttonFalse"} onClick={this.handleClick}> <i className="far fa-smile"></i> Hi!!</button>  
    </div>
    )
  }
  
}

ReactDOM.render(<Button />, document.querySelector("#app"));

Popularity 9/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: background-color html onclick set

Link to this answer
Share Copy Link

Contributed on Aug 26 2022

Usama Ashraf

0 Answers Avg Quality 2/10

onclick set background color react

Contents

More Related Answers

onclick set background color react

Grepper

Documentation

Social

Legal

Contact

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