Multiple class name addition in React

Master the art of multiple class name addition in React and elevate your frontend development skills. The majority of React developers use JSX, a unique syntax for creating straightforward component definitions. Since its syntax is so similar to HTML, the majority of React engineers favor it. There are a few key distinctions when it comes to class scheduling.

You’re undoubtedly accustomed to creating classes in HTML by using the class attribute. Class is a reserved word because React components can be thought of as instances of classes. Therefore, programmers must substitute the className attribute.

So, regardless of the status of the application, the applied class list remains the same. What if, however, you desired that a particular condition be met before one or more classes were applied? If the loading state variable is set to true, for instance, the component’s wrapper div should be styled with a specific class. 

Alternatively, suppose your wizard has three steps and you want to set a particular class based on which step is active. To achieve this effect in React, there are several different methods.

The addition of one class name:

By separating them with spaces, you can add more than one class name to the className attribute.

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

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

export default App;

Conditionally adding multiple class names:

Using the className attribute, we can add a single class name to the react element.

Using template literals and the ternary operator, we can conditionally add multiple class names to the react element.

Conditionally refers to the application of class names to an element only when a specific condition is met, for as adding a class name to the div element if the is

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 World!!</h1>
           <button onClick = {()=>setActive(!isActive)}>
             Click Me
           </button>
        </div>
    )
}

export default App;

If the isActive property is true in the example above, we add the shadow class name to a div element; otherwise, we remove it.

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

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

classnames library use:

If there are multiple classes and intricate conditions, classnames is a useful library that can be used.

import classNames from "classnames"
import { useState } from "react"
 
function App() {
  const [isWarning] = useState(true)
  return (
    <div className={classNames("box", { warning: isWarning })}>
      This is a message
    </div>
  )
}
export default App

Dynamic class addition:

You’d typically want to add a class dynamically based on a criteria. This can be accomplished in a variety 

String Interpolation is utilized (Template Literals):

import { useState } from "react"
 
function App() {
  const [isWarning] = useState(true)
  return (
    <>
      <div className="box success">This is a success message</div>
      <div className={`box ${isWarning === true && "warning"}`}>
        This is a message
      </div>
    </>
  )
}
 
export default App

When the isWarning state is true, the warning class will only be inserted. Instead of explicitly checking since isWarning is a boolean, we could express this as box $isWarning && “warning”.

using the parent component’s properties:

We can use the parent component’s passed-in props to provide the class name:

const ChildComp = props => {
  return <div className={`box ${props.status}`}>This is an error message</div>
}
function App() {
  return <ChildComp status="error" />
}
 
export default App

classnames library use:

If there are multiple classes and intricate conditions, classnames is a useful library that can be used.

import classNames from "classnames"
import { useState } from "react"
 
function App() {
  const [isWarning] = useState(true)
  return (
    <div className={classNames("box", { warning: isWarning })}>
      This is a message
    </div>
  )
}
export default App

Conclusion:

There are other ways to define classes dynamically, but defining multiple CSS classes statically in JSX is equal to doing so in pure HTML.

A well-liked and adaptable method for managing numerous classes dynamically is the classNames package.