by Sai gowtham

How to add multiple class names in React

In this tutorial, we are going to learn about how to conditionally add or remove multiple css class names to a react app.

Adding a single class name

We can add a single class name to the react element by using the className attribute.

import React from 'react';
import './styles.css';

function App(){
    return (
        <div className="container">           <h1>Hello rock!!</h1>
        </div>
    )
}

export default App;

If you want to add multiple class names, you can add it to the className attribute by separating with spaces.

import React from 'react';
import './styles.css';

function App(){
    return (
        <div className="container top-2 bottom-3">           <h1>Hello rock!!</h1>
        </div>
    )
}

export default App;

Adding multiple class names conditionally

We can add a multiple class names to the react element conditionally; by using template literals, ternary operator.

Conditionally means class names are only applied to the element when a particular condition is true, like if isActive property is true we are adding a class name to the div element, otherwise class name is removed.

Example:

import React, {useState} from 'react';
import './styles.css';

function App(){

const [isActive, setActive] = useState(false);
    return (
        <div className={`container top-3 ${isActive ? "shadow": ""}`}>           <h1>Hello rock!!</h1>
           <button onClick = {()=>setActive(!isActive)}>             change classname
           </button>
        </div>
    )
}

export default App;

In the above example, we are adding shadow class name to a div element, if isActive property is true, otherwise we removed it.

Similarly, we can also add different class name to a div element when an isActive property is false.

<div className={`container top-3 ${isActive ? "shadow": "red-shadow"}`}>

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course