[React] Using the Classnames library for conditional CSS

Classnames is a simple yet versatile JavaScript utility the joins CSS class names based on a set of conditions. We are going to build a simple toggle switch this relies on the state to determine what CSS classes would 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); //<div classname= "Circle off" ></div>  //<span classname= "Textoff" >{this.state.ison? ' On ': ' OFF '}</span>    return (      <div onclick={ This.togglestate}> <div classname={circleclasses}></div> <span classname={textclasses}>{ This. State.ison? ' On ': ' OFF '}</span> </div>    ); }}window.onload= () = {Reactdom.render (<classnamesexample/>, document.getElementById (' app '));}

To JsBin

[React] Using the Classnames library for conditional CSS