I have a table and I am currently working on implementing a search functionality that searches for an element and highlights the search terms as they are entered into the search bar. The search function is functional, but I am having trouble with the highlighting aspect.
My goal is to apply custom styling to the text inside my array.map conditionally based on the input state or render custom elements with specific styling. Below is the relevant code (with comments):
<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>} // Conditionally rendering component with styled class
<td>transaction.description.includes(input) ? transaction.description ? transaction.description</td> // Applying style directly
<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>
If this explanation is confusing, just know that the "input" mentioned refers to the e.target.value that I receive and the letters that I want to highlight as they are entered.
Thank you