title: Can I access "this" from a class property?
body: <p>I'm trying to call <code>this</code> inside the <code>onClick</code> function which is inside the object, but I'm getting undefined in the console. Why is this happening?</p>
  <p>Panel.tsx:</p>
  <pre><code>import * as React from 'react';
  
  import PanelInterface from './Panel.Interface';
  import Config from &quot;../../Config&quot;;
  
  const Panel: React.FC&lt;PanelInterface&gt; = (props) =&gt;
  {
      const config = new Config({
          panel : {
              onClick: function() {
                  console.log(this);
              }
          }
      }).get();
  
      return (
          &lt;div {...config.panel}/&gt;
      );
  };
  
  export default Panel;
  </code></pre>
  <p>Config.ts:</p>
  <pre><code>export default class Config
  {
      private readonly configuration: any;
  
      constructor(configuration: Object)
      {
          this.configuration = configuration;
      }
  
      public get(): any
      {
          return this.configuration;
      }
  }
  </code></pre>
  <p>Console output:</p>
  <pre><code>undefined
  undefined
  </code></pre>
  <p>Edit: Usage arrow functions has no effect. Also undefined in output.</p>
  <p>Edit: The question was closed as a duplicate, although it is not. I managed to solve the problem by changing in Panel.Config:</p>
  <pre><code>export default new Config({
      panel : {
          className : css.panel,
          onClick: () =&gt; {
              console.log(this);
          }
      }
  });
  </code></pre>
  <p>to:</p>
  <pre><code>const config = new Config({
      panel : {
          className : css.panel,
          onClick: () =&gt; {
              console.log(config);
          }
      }
  });
  
  export default config;
  </code></pre>
  <p>So in onClick instead of <code>this</code> I can use <code>config</code>.</p>