React/ReactJS: Add Class Conditionally

Often in web applications we come across situations like the need to hide an element till some condition is met or change the background colour of an option when it is selected. Sometimes, the need is to add an active class on click of a button. We come across many such requirements which all can be achieved by adding of some class conditionally.

In this tutorial, we will be learning how in React we can add a class name dynamically upon meeting some condition.

Consider the below <div/> element which wraps the following loader image.

					
					  render() {
					    return (					    
					        <div className="loader">
					        	<img src="https://i.redd.it/o6m7b0l6h6pz.gif"/>
					        </div>				
					    );
					  }				
					
				

Now say you want to hide the spinner upon successful fetching of some data from an API inside your componentDidMount(). To achieve that, we can actually toggle the below .hide class by adding/removing it to/from the wrapper <div/> element.

					
					.hide {
						display: none
					}				
					
				

Now to toggle the class, you can maintain some state variable, say fetchSuccess, which is initialized to a boolean value false inside the constructor() and set it to true upon completion of request. We can then set a conditional statement inside a pair of braces as follows:

					
					  render() {
					    return (					    
					        <div className={"loader " + (this.state.fetchSuccess? "hide":"")}>
					        	<img src="https://i.redd.it/o6m7b0l6h6pz.gif"/>
					        </div>				
					    );
					  }				
					
				

Carefully note the space after the loader class.

The below section has a full working example component showing how in React we can conditionally add a classname.

						
						class LoaderExample extends React.Component {
						  constructor(props) {
						    super(props);
						    this.state = {
						    	fetchSuccess: false
							}
						  }

						  componentDidMount() {
						    fetch('https://jsonplaceholder.typicode.com/users')
						      .then(response => {
								this.setState({ 
									fetchSuccess: true 
								});
						  	});						      
						  }

						  render() {
						  	const{ fetchSuccess } = this.state;

						    return (					    
						        <div className={"loader " + (fetchSuccess? "hide":"")}>
						        	<img src="https://i.redd.it/o6m7b0l6h6pz.gif"/>
						        </div>				
						    );
						  }	
						}

						export default LoaderExample;