Detect which word is clicked within a paragraph in React

Question

I have a paragraph with some text that I am showing to a user. How do I detect the word that the user clicks on within the paragraph? For example, if a user clicks 'green' on a page, how could I detect that they specifically clicked on 'green'?

const str = 'The sky is blue. The grass is green. The stop sign is red.'

const handleClick = () => {
  alert(e.target.value);
}

const Content = () => {
  return (
    <div>
      <p onClick={handleClick()}>{str}</p>
    </div>
  );
};

Answer 1

Something like this...

const str = 'The sky is blue. The grass is green. The stop sign is red.'

const handleClick = (s) => {
    alert(s);
}

return (
    <div>
        {
            str.split(' ').map(s => {
                return <span onClick={() => handleClick(s)}>{s}&nbsp;</span>
            })
        }
    </div>
);