Loop through elements in map function in React

Question

I'm trying to loop though an element inside a map function.

const set = new Set(["I", "deck"," Yes."]);
const arr =  value.sort((a, b) => a.id - b.id)

return <RightWrapper>
   { arr.map(transcript => (<p key={transcript.id}style= 
   {{color:set.has(transcript.Transcription) ? 'red' : 'black'
   }} >{transcript.createdAt + "  " + transcript.Transcription + " "} </p> )) }
    </RightWrapper>;

In the code above I want to iterate over transcribe.Transcription (inside map function ) and check if any word is in the set. If yes then apply the style otherwise don't.

Answer 1

Not sure if you are stuck at logic inside your map function or you not able to map HTML elements. If you are not able to map HTML elements, then here is a codeSandbox. https://codesandbox.io/s/map-over-elements-vjo0r1