toggle css class in react

//toggle css class in react using mouse clicks
//solution
class foo extends Component {
  	constructor(props){
        super(props);
        this.state={
            isToggle:false
        }    
    }
  render() {
            return (
                <div className={this.state.isToggle ? "myClass":null} 
  				onClick={()=>{this.setState({isToggle:!this.state.isToggle});}}>           
                        <div className="box">    
                        </div>    
                </div>
            );   
    }
}
//or in more elegant way

class foo extends Component {
  	constructor(props){
        super(props);
 ////////////////////////////////////////
      // this variable will be used to know when should your progam use the class or not
        this.state={
            isToggle:false
        }    
////////////////////////////////////////
    }
  render() {
            return (
////////////////////////////////////////     
              // if (this.state.isToggle) then "myClass" else null
                <div className={this.state.isToggle ? "myClass":null} 
////////////////////////////////////////
////////////////////////////////////////   
  			// when the current div is clicked negate isToggle
  				onClick={()=>{this.setState({isToggle:!this.state.isToggle});}}>           
                        <div className="box">    
                        </div>    
                </div>
////////////////////////////////////////   
            );   
    }
}