Soy nuevo en React y estoy intentando resaltar el texto en una expresión JSX basada en las palabras clave de una matriz.
return <RightWrapper> {value.sort((a, b) => a - b.id).map(transcript => <p key={transcript.id}>{transcript.createdAt+" "+ transcript.Transcription +" "} </p> )} </RightWrapper> searchWords={["tech", "deck", "financial"]}Puede crear un conjunto de palabras de búsqueda. Verifique si ese texto está disponible en un conjunto o no. También puede hacerlo usando una matriz, pero es más lento en comparación con el conjunto.
const set = new Set(["tech", "deck", "financial"]); const arr = value.sort((a, b) => a.id - b.id) return ( <RightWrapper> { arr.map(transcript => ( <p key={transcript.id} style={{ color: set.has(transcript.id) ? 'red' : 'black' }} >{transcript.createdAt + " " + transcript.Transcription + " "} </p> )) } </RightWrapper> )Esto debería solucionar tu problema,
const set = new Set(["tech", "deck", "financial"]); const arr = value.sort((a, b) => a.id - b.id); function createMarkup(transcript) { const words = ["tech", "deck", "financial"]; let str = `${transcript.createdAt} ${transcript}`; words.forEach((word) => { if (str.includes(word)) { str = str.replaceAll(word, `<span class="highlight">${word}</span>`); } }); return { __html: str }; } return ( <RightWrapper> {arr.map((transcript) => ( <p dangerouslySetInnerHTML={createMarkup(transcript.Transcription)} key={transcript.id} ></p> ))} </RightWrapper> );