I am making a very simple app, using REACT, that calls an API and brings a random phrase.
Whenever I click on the phrase I want to be able to access the clicked word, but I couldn't figure how to do it (I read lots if similar posts but even with that I could not make it work).

This is the code

```
import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { phrase: [] };
  }

  handlerApi = async () => {
    const api_call = await fetch(
      "https://api.whatdoestrumpthink.com/api/v1/quotes/random"
    );
    const data = await api_call.json();
    const phrase_array = data.message.split(" ");
    this.setState({ phrase: phrase_array });
  };
  handlerWordClicked = (word) => {
    console.log(word);
  };

  render() {
    let phrase = this.state.phrase.map((word) => word + " ");
    return (
      <div className="App">
        <div>
          <button onClick={this.handlerApi}>Call api</button>
          <div>
            {" "}
            <p onClick={(e) => this.handlerWordClicked(e.target)}>{phrase}</p>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

```