How to change a background color for a row

Question

I have this code I need to do that if {row.BB} <= 100 then show the row background that has this number as red color how can I do this This code connected to a database and it with a JSX file

    return (
        <>
            <Navigation />
            <Box bg={'white'} w="100%"
                 p={4}
                 m={4}
                 color="black"
                 rounded={'md'}
            >
                     <Table size='sm' variant='striped' colorScheme='gray'>
                         <Thead>
                             <Tr>
                                <Th>A</Th>
                                <Th>B</Th>
                                <Th>C</Th>
                             </Tr>
                         </Thead>
                         <Tbody>
                         {file.map((row, index) => (
                             <Tr key={index}> 
                                 <Td>{row.AA}</Td>
                                 <Td>{row.BB}</Td>
                                 <Td>{row.CC}</Td>
                             </Tr>
                         ))}
                         </Tbody>
                     </Table>
            </Box>
        </>
    );
}

Answer 1

I assume 'bg' is used to give the background color of the row, which is also used for Box background color in your code.

<Tr bg={ (row.BB <= 100 ? 'red': 'white') } key={index}> 
    <Td>{row.AA}</Td>
    <Td>{row.BB}</Td>
    <Td>{row.CC}</Td>
</Tr>

Answer 2

There are numerous ways you could likely go about this, but I think the simplest way is to keep it simple ( since you are already using old school <table> s and <td> s anyway ).

You could do try something like this:

<Tr>
  ...
  <Td bgcolor={row.BB <= 100 && 'red'}>
</Tr>

Let me know if that works for you.

Answer 3

Your question is not quite clear to me but still considering you want to change this row <Td>{row.BB}</Td> then, you can do that in two ways

1. Using If else block

` {file.map((row, index) => (

if (row.BB <= 100){
    return (
        <Tr key={index} style={{backgroundColor:'red'}}> 
            <Td>{row.AA}</Td>
            <Td>{row.BB}</Td>
            <Td>{row.CC}</Td>
        </Tr>
    )
else {
    return(
        <Tr key={index}> 
            <Td>{row.AA}</Td>
            <Td>{row.BB}</Td>
            <Td>{row.CC}</Td>
        </Tr>
    )}
}
))}

`

2. If you are aware of ternary operator then you can simply use ` { file.map((row, index) => (

    { row.BB <= 100? (<Tr key={index} style={{ backgroundColor: 'red' }}> <Td>{row.AA}</Td> <Td>{row.BB}</Td> <Td>{row.CC}</Td> </Tr>): (<Tr key={index}> <Td>{row.AA}</Td> <Td>{row.BB}</Td> <Td>{row.CC}</Td> </Tr>) }

   ))}} `

Please let me know if any of these methods works