so what i wanna do is, i have some text, and when i click some word, it returns me that word. So let's say ' I have a car ', if i click 'car', i want it to return me 'car'. To do that, i tried this:

const alltext = text.toLowerCase().split(" ");

text is the target text (it would be the 'i have a car').

So now i have an array with each word. To render it i did:

alltext.map((item) => (
          <span> {item}</span>
        )) 

And i passed a click function that returns to me the span inner text. And it's working ok most of times, the problem is if i paste a text with two paragraphs, because that blank line becomes '\n' in the array. So if i have like

The american history.

It begins with...

And i paste it, the array is ['the', 'american', 'history.\n\nit', 'begins', 'with']

Allthough it renders decently, the problem is when i click history, it returns 'history. it'. First of all, is there a better/smarter way to do that? And second, how can i fix this?

Thank you