React Fabric Ui Panel can't close - reactjs

Question

I have an Sharepoint app. By clicking on a command list button I open a panel.
But when I try to close the panel I get a error saying that my _renderPanelComponent function is not a function and when trying to log it from _dismissPanel() it I get that it is undefined. But I can call it from _showPanel().
By logging from _dismissPanel() I now that I get back here after clicking close and triggered _onCancel() but I'm not sure why my _renderPanelComponent gets undefined and thats my question.
This is what the code looks like
import { override } from '#microsoft/decorators';
import { Log } from '#microsoft/sp-core-library';
import {
BaseListViewCommandSet,
Command,
IListViewCommandSetListViewUpdatedParameters,
IListViewCommandSetExecuteEventParameters
} from '#microsoft/sp-listview-extensibility';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { assign } from '#uifabric/utilities';
import MainPanel, { IMainPanelProps } from '../MainPanel';
export interface ICreditInfoCommandSetProperties {
sampleTextOne: string;
sampleTextTwo: string;
context:object;
}
export default class CreditInfoCommandSet extends BaseListViewCommandSet<ICreditInfoCommandSetProperties> {
private panelPlaceHolder: HTMLDivElement = null;
public _renderPanelComponent(props: any) {
const element: React.ReactElement<IMainPanelProps> = React.createElement(MainPanel, assign({
isOpen: false,
onClose: null,
context: this.context
}, props));
ReactDom.render(element, this.panelPlaceHolder);
}
private _showPanel() {
this._renderPanelComponent({
isOpen: true,
onClose: this._dismissPanel,
context: this.context
});
}
private _dismissPanel() {
console.log(typeof(this._renderPanelComponent))
this._renderPanelComponent({ isOpen: false});
}
#override
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, 'Initialized CreditInfoCommandSet');
this.panelPlaceHolder = document.body.appendChild(document.createElement("div"));
return Promise.resolve();
}
#override
public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
}
#override
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
switch (event.itemId) {
case 'COMMAND_2':
this._showPanel();
break;
default:
throw new Error('Unknown command');
}
}
}
And this is what my panel looks like
import * as React from 'react';
// Custom imports
import { Panel, PanelType , TextField, Checkbox, DefaultButton, PrimaryButton, Dropdown, IDropdownOption} from 'office-ui-fabric-react';
import style from "./MainPanelStyle.module.scss";
export interface IMainPanelProps {
onClose: () => void;
isOpen: boolean;
}
export interface IMainPanelState {}
export default class MainPanel extends React.Component<IMainPanelProps, IMainPanelState> {
constructor(props: IMainPanelProps, state: IMainPanelState) {
super(props);
this.state = {}
private _onCancel = () => {
this.props.onClose();
}
public render(): React.ReactElement<IMainPanelProps> {
return (
<div>
<Panel isLightDismiss={true} isOpen={this.props.isOpen} type={PanelType.medium} onDismiss={this.props.onClose}>
<DefaultButton className={style.closeButton} text="Close" onClick={this._onCancel}/>
</Panel>
</div>
);
}
}

Answer 1

I ran into this too. Changing this
private _dismissPanel() {
to
private _dismissPanel = () =>{
Got this working for me, as it binds the method to the scope of its class so this can be properly resolved. I realize this is an old post but just in case any one else runs into this issue.