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;
}