Classnames is a simple yet versatile javascript utility that joins CSS class names based on a set of conditions. We are going to build a simple toggle switch that relies on state to determine what CSS classes will be applied.

 

//className = require('classnames')const className = window.classNames;class ClassnamesExample extends React.Component {  constructor(props) {    super(props);    this.state = {      isOn: false    };  }  toggleState = () => { this.setState({isOn: !this.state.isOn}); }  render() {    const circleClasses = className({      circle: true,      off: !this.state.isOn,      on: this.state.isOn    });    const textClasses = className({      textOff: !this.state.isOn    })    console.log(circleClasses);  //    
     
  //    {this.state.isOn ? 'ON' : 'OFF' }    return (      
     
        
      
        
      {
   this.state.isOn ? 'ON' : 'OFF' }      
     
    );  }}window.onload = () => { ReactDOM.render(
     , document.getElementById('app')); }

 

 to