title: How to prevent e.target from targeting inner elements?
body: <pre><code>handleNewGame = (e) =&gt; {
      const temp = this.defaultState;
      if (e.target.id === &quot;ai&quot;) {
        temp.players[1].name = &quot;ai&quot;;
      }
      this.setState(temp, () =&gt; console.log(this.state, this));
    };
  </code></pre>
  <p>This is the event handler, I have a bunch of buttons (but they are divs, not real buttons) so when I click on them, I'm getting the h3 or icon inside instead of the div that has the handler attached to it.
  I can't seem to use this since I'm in react and it just gives me the class.</p>