I'm currently working with a table that fetches values from an API. My goal is to dynamically change the background color of the Status Field based on the value received for request.status
There are a total of 4 status values:
- Completed
- Work in Progress
- To be Started
- Awaiting Customer Confirmation
What would be the most effective approach to achieve this?
export default function RequestPage() {
const [requests, setRequest] = useState([]);
useEffect(() => {
const fetchRequests = async () => {
const res = await fetch('/api/requests');
const data = await res.json();
console.log(data);
setRequest(data);
};
fetchRequests();
}, [setRequest]);
return (
{requests.map((request) => {
return (
<span aria-hidden="true" className="absolute inset-0 opacity-50 rounded-full bg-green-200"></span>
<span className="relative">{request.status}</span>
)}
})
This project is my first time using Typescript and I am excited to learn more about it.