title: Why is "this" keyword undefined when invoked by inline event handler in React, but it refers to the caller when invoked by post-render event listener?
body: <pre><code>const Event = () =&gt; {
  
      // useEffect(()=&gt;{
      //     document.getElementById('btn').addEventListener('click', function() { 
      //         console.log(myObj.showThis())
      //     })
      // })
     
      const myObj = {
          name: 'romeo',
          showThis: function() {
              console.log(this)
          }
      }
  
      return (
          &lt;div&gt;
              &lt;button id='btn' onClick={myObj.showThis} &gt;Fire Event&lt;/button&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>In here, I am adding inline event handler which invokes the <code>myObj.showThis</code> method, and when it does, the console logs out <em>undefined</em>, but if I instead use the <code>useEffect()</code> hook to add event listener to the button, which invokes the same <code>myObj.showThis</code> function, now the console logs out the caller, which is the button, so <code>this</code> refers to the caller, but why is <code>this</code> <em>undefined</em> when I invoke the same method via inline event handler?</p>