CODEWITHSUNDEEP
javascripthtmlcssreactjsdictionary
Rk Shawon
Rk Shawon

Reputation: 17

Dynamic style using react map function

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

Upvotes: 1

Views: 793

Answers (1)

Shoyeb Memon
Shoyeb Memon

Reputation: 1149

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>

Upvotes: 1

Related Questions