Issue

How can I change the background of the text depending on the current value of the status?

So right now, the current status is pending, which defaulted to yellow.

Example: the value changes and it becomes complete. The background colour should change to green.

<Typography sx={{padding:1, backgroundColor: 'yellow'}}>
       {recent.status}
</Typography>

This is what it looks like.

Solution

For all the status you have

Map status with color:

const statusColor={
complete:'green',
pending:'yellow',
initiate:'blue',
}

And wherever you are getting this status value recent.status use this

<Typography sx={{padding:1, backgroundColor: statusColor[recent.status]}}>
       {recent.status}
</Typography>

Answered By - Mohammed Shahed
Answer Checked By - - Pedro (ReactFix Volunteer)