How to add Custom styling to specifc text in react/next.js

Question

I Have a table and i'm implementing a search functionality that search for an element and highlights the search terms as they are being entered into the search bar. I got the search function working but not the highlighting.

I want to apply a custom style to the text inside my array.map conditionally based on my input state or conditionally render custom elements with styling. Here is the code ( comments in code )

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

I'm sorry if i'm confusing. input here is the e.target.value I get and the letter than I want to highlight as it gets entered.

Thanks

Answer 1

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

As map() returns (in this case) an individual code for each element in the array so the individual code can be directly targeted give a className to the topmost tag (in this case) tr and then target each value(td) in it like we do in any css styles. And if you want to show custom styles for different value entered then use javascript. Make objects for styles in your custom styles then get the value in the table using javascript dom or use if..else statements to do it. Then just assign the the name of the style object (where you have used your custom styles) as the style or class tag!

I did used this method few months back to do it.I don't know if this would work!

Answer 2

You can conditionally add className to td based on search term. Something like below should work:

<td className={transaction.description.includes(input) ? styles.highlight: ''}>
  {transaction.description}
</td>