Add dynamic class in react

Today we gonna see how to add classes dynamically in jsx to change design.

Suppose we have below line of code

-- js
import React from "react";
import "./App.css";

function App() {
const row=[
{status: 'approved'},
{status: 'pending'},
{status: 'approved'},
{status: 'pending'},
]
  return (
    <div className="App">
    <div className='list'>
    {row.map((item) => (
     <span className='listbatch'>
     {item.status}
    </span>
    ))}
    </div>
    </div>
  );
}

export default App;

You'll get something like this

Now you need just add class in literal and add state of that class

function App() {
const row=[
{status: 'approved'},
{status: 'pending'},
{status: 'approved'},
{status: 'pending'},
]
  return (
    <div className="App">
    <div className='list'>
    {row.map((item) => (
     <span className={`listbatch ${item.status}`}>
     {item.status}
    </span>
    ))}
    </div>
    </div>
  );
}

Below is the css file

.list{
    display: flex;
    flex-direction: column;
    height: 20vh;
    width: 20vw;
    box-shadow:2px 4px 10px 1px rgba(218,218,218,0.478); 
    border-radius: .5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0%, -50%);
    padding: 10px;
}

.listbatch{
padding: 5px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}

.approved{
background-color: green;
color: white;
}

.pending{
background-color: yellow;
color: black;
}