reactjs

Add CSS class dynamically in React

class Hello extends React.Component {
    render() {
        return (
            <div>
                <div className={"first_class " + (this.state.val ? "true_class" : "false_class") + " another_class" }>First Method</div>
                <div className={`container box ${this.state.something}`}>Second Method</div>
                <div className={'container box ' + this.state.something}>Third Method</div>
            </div>
        );
    }
}

The code provides a way to add CSS classes to React components dynamically. You can add classes based on conditions and state variables. You can also define a class in the state properties and change its name dynamically after adding it to an element.

Was this helpful?