In my display area, which is a div element, I have rendered some text using spans. I utilized the map function to render the text from an array.
The issue arises when I apply a color class to the span elements within the map function, causing all text to have the same color. I understand why this is happening, but I only want a specific word (a single word I target) to have the color while the rest remain unchanged. I am currently unable to find a solution to this problem.
The word I want to trigger the color change is "colorTrigger".
Here is a snippet of the code:
<div className="firstLine">
{display.map(word => {
if (colorTrigger) {
return (<span key={uuid()} className="singleWord redColorWord">{word}</span>)
}
return (<span key={uuid()} className="singleWord">{word}</span>)
})}