How to change a background color for a row-CodePudding

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>
        </>
    );
}

CodePudding user response：

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>

CodePudding user response：

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.

CodePudding user response：

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

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>
    )}
}
))}

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