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