React

by Abdul Ahmad

HTML

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

CSS

div {
  width: 100px;
  height: 100px;
}

.green {
  background: green;
}

.red {
  background: red;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	klass: 'green',
    }
  }
  
  changeClass = () => {
  	const currentClass = this.state.klass;
    let newClass = '';
    if (currentClass === 'green') newClass = 'red';
    else newClass = 'green';
  	this.setState({ klass: newClass });
  }
  
  render() {
  	const { klass } = this.state;
    return (
      <div className={klass} onClick={this.changeClass}>
       
      </div>
    )
  }
}

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