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>
</>
);
}
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={ () => this.getColorOftheRow(row.BB) } key={index}>
<Td>{row.AA}</Td>
<Td>{row.BB}</Td>
<Td>{row.CC}</Td>
</Tr>
in component
function getColorOftheRow(value) {
if (value <= 100)
return 'red';
else if (value >= 100)
return 'green';
// add as many conditions as you want
else
return 'white';
}
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
` {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
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'}></Td>
</Tr>
Let me know if that works for you.