Tengo una tabla y estoy implementando una funcionalidad de búsqueda que busca un elemento y resalta los términos de búsqueda a medida que se ingresan en la barra de búsqueda. Tengo la función de búsqueda funcionando pero no el resaltado.
Quiero aplicar un estilo personalizado al texto dentro de mi array.map condicionalmente basado en mi estado de entrada o renderizar condicionalmente elementos personalizados con estilo. Aquí está el código (comentarios en el código)
<Table className={styles.table}> <thead> <tr> <th>Description</th> <th>Date and time</th> <th>Debit</th> <th>Credit</th> <th>Balance</th> </tr> </thead> <tbody> {input.length < 1 ? displayTransactions.map(transaction => ( <tr key={transaction._id}> <td>{transaction.description}</td> <td>{transaction.date}</td> <td className={styles.debit}>- ${transaction.debit}</td> <td className={styles.credit}>+ ${transaction.credit}</td> <td>{transaction.balance}</td> </tr> )) : output.map(transaction => ( <tr key={transaction._id}> {transaction.description.includes(input) ? <td className={styles.highlight}>transaction.description</td>: <td>transaction.description</td>} // I want to either render the comp with a styled class and I can add CSS to it or like below apply styling directly <td>transaction.description.includes(input) ? // apply style directly here transaction.description ? transaction.description</td> <td>{transaction.date}</td> <td className={styles.debit}>- ${transaction.debit}</td> <td className={styles.credit}>+ ${transaction.credit}</td> <td>{transaction.balance}</td> </tr> ))} </tbody> </Table>Lo siento si estoy confuso. la entrada aquí es el e.target.value que obtengo y la letra que quiero resaltar a medida que se ingresa.
Gracias
{input.length < 1 ? displayTransactions.map(transaction => ( <tr key={transaction._id} className={**className**}> <td>{transaction.description}</td> <td>{transaction.date}</td> <td className={styles.debit}>- ${transaction.debit}</td> <td className={styles.credit}>+ ${transaction.credit}</td> <td>{transaction.balance}</td> </tr> ))Como map () devuelve (en este caso) un código individual para cada elemento de la matriz, de modo que el código individual se pueda orientar directamente, asigne un nombre de clase a la etiqueta superior (en este caso) tr y luego apunte a cada valor (td) en él como lo hacemos en cualquier estilo css! Y si desea mostrar estilos personalizados para diferentes valores ingresados, use javascript. Cree objetos para estilos en sus estilos personalizados y luego obtenga el valor en la tabla usando javascript dom o use declaraciones if...else para hacerlo. Luego simplemente asigne el nombre del objeto de estilo (donde ha usado sus estilos personalizados) como la etiqueta de estilo o clase.
Utilicé este método hace unos meses para hacerlo. ¡No sé si esto funcionaría!
Puede agregar condicionalmente className a td según el término de búsqueda. Algo como lo siguiente debería funcionar:
<td className={transaction.description.includes(input) ? styles.highlight: ''}> {transaction.description} </td>