I want to change the color of the card based on the value of the current slot which is an object in an array. So when I am mapping through a card I want to change the backgroundColor of the card based on the value. How should I do that? My current approach doesn't seem to work.
slots.map(slot =>
<Card key ={slot._id} style={{backgroundColor:slot.OccupiedStatus?'black':'teal'}}>
<Typography>{slot.category}</Typography>
</Card>
Since The Card is a React Component, in your case the style is not considered an attribute instead it is a prop that will be passed on to the Card component.
You can catch that style prop in your Card Component and use it.
const Card = (style, ...otherProps) => {
return <div style={style} >hello</div>
}