I have a display area(which is a div) where I rendered some text(using span ).I used map function to render the text from an array .
The problem is when I add color class to span inside map function every text gets the same color(I know why its happening) but I only want the specific text(single word I target) to take the color and the remaining will stay the same. Can't think of any solution for this .
[colorTrigger is the word that I want to color.] here is sample 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>)
})}
You can put a condition on the className itself. i don't know what the colorTrigger is, but as per your question you can check if its present or not . similar to your if loop applied on the className conditionally.
<div className="firstLine">
{
display.map(word=>{
return (<span key={uuid()}
className={`${word === 'colorTrigger' ? 'redColorWord' : null}
singleWord`}>
{word}
</span>)
})
}
</div>