I have a React component that looks something like this:
It is a simple table built by iterating over a state variable called clientOrders. For each “order” in clientOrders I render a row. Each row has a button that when pressed changes the Boolean value of order.status.
At the moment, when I click on the button, the status changes correctly from “Pending” (order.status is false) to “Done” (order.status is true).
What doesn’t work is the HTML classes that are being applied to the element. The background color is always red and I want it to be green when order.status is true.
For example, in the attached image, you can see that the first row has a status of Done, so I’d like to render that with a green background.
const RestaurantActions = () => {
const [clientOrders, setClientOrders] = useState([])
// When the "Change status" button is pressed, change the state corresponding to that row
const handleButton = (rowId: number) => {
setClientOrders(clientOrders.map(row =>
row.id === rowId ? { ...row, status: !row.status } : row
));
}
return (
...
{/* Render a column for each "order" stored in the state */}
{ clientOrders.map(order => (
<tr>
<td>
{/* If the status of the order is true, render it with a green background. This doesn't work. */}
{/* If the status of the order is false, render it with a red background. This doesn't work. */}
<span className="{ order.status ? bg-green-50 : bg-red-100 }">
{/* If the status of the order is true, display the text "Done". This works. */}
{/* If the status of the order is false, display the text "Pending". This works. */}
{ order.status ? 'Done' : 'Pending' }
</span>
</td>
<td>
<button onClick={() => handleAButton(order.id)}>
Mark as done / pending
</button>
</td>
</tr>
))}
...
)
}
Why can I change the text of the Staus column (“Pending” <—> “Done”), but not the background and text color (Green <—> Red)?