Tengo este código. Necesito hacer eso si {row.BB} <= 100, luego mostrar el fondo de la fila que tiene este número en color rojo. ¿Cómo puedo hacer esto? Este código está conectado a una base de datos y con un archivo JSX.
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> </> ); }Supongo que 'bg' se usa para dar el color de fondo de la fila, que también se usa para el color de fondo del cuadro en su código.
<Tr bg={ () => this.getColorOftheRow(row.BB) } key={index}> <Td>{row.AA}</Td> <Td>{row.BB}</Td> <Td>{row.CC}</Td> </Tr>en componente
function getColorOftheRow(value) { if (value <= 100) return 'red'; else if (value >= 100) return 'green'; // add as many conditions as you want else return 'white'; }Su pregunta no está del todo clara para mí, pero aún considerando que desea cambiar esta fila <Td>{row.BB}</Td> entonces, puede hacerlo de dos maneras
` {archivo.mapa((fila, índice) => (
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> )} } ))}`
Si conoce el operador ternario, simplemente puede usar ` { 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>) }))}} `
Por favor, hágame saber si alguno de estos métodos funciona.
Hay muchas maneras en las que probablemente podría hacer esto, pero creo que la forma más simple es mantenerlo simple ( ya que ya está usando <table> s y <td> s de la vieja escuela de todos modos ).
Podrías intentar algo como esto:
<Tr> ... <Td bgcolor={row.BB <= 100 && 'red'}></Td> </Tr>Déjame saber si eso funciona para ti.