Dynamic style using react map function

Question

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

Did you mean if (colorTrigger === word)?

Elan Hamburger
– Elan Hamburger

2022-02-19 06:17:10 +00:00
Commented Feb 19, 2022 at 6:17 — Elan Hamburger
– Elan Hamburger, Commented Feb 19, 2022 at 6:17
yes colorTrigger is the word I want to target.

Rk Shawon
– Rk Shawon

2022-02-24 12:23:43 +00:00
Commented Feb 24, 2022 at 12:23 — Rk Shawon
– Rk Shawon, Commented Feb 24, 2022 at 12:23

Shoyeb Memon · Accepted Answer · 2022-02-19 06:34:09Z

1

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>

answered Feb 19, 2022 at 6:34

Shoyeb Memon

1,1591 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic style using react map function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related