Tengo un área de visualización (que es un div) donde representé algo de texto (usando span). Usé la función de mapa para representar el texto de una matriz.
El problema es que cuando agrego una clase de color para abarcar la función de mapa interno, cada texto obtiene el mismo color (sé por qué sucede), pero solo quiero que el texto específico (una sola palabra a la que me dirijo) tome el color y el resto permanecerá igual. . No puedo pensar en ninguna solución para esto.
[colorTrigger es la palabra que quiero colorear.] Aquí hay un código de muestra:
<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>) })}Puede poner una condición en el mismo className . No sé qué es colorTrigger , pero según su pregunta, puede verificar si está presente o no. similar a su if loop aplicado en className condicionalmente.
<div className="firstLine"> { display.map(word=>{ return (<span key={uuid()} className={`${word === 'colorTrigger' ? 'redColorWord' : null} singleWord`}> {word} </span>) }) } </div>