Close the toast on Click/tap in React Toast component

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastClickEventArgs, ToastComponent  } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';

class App extends React.Component<{}, {}> {
  public toastInstance: ToastComponent;
  public timeOutDelay: number = 600;
  public position = { X: 'Right', Y: 'Bottom' };

  public toastCreated(): void {
    this.toastShow(this.toastInstance);
  }

  public toastShow(toastObj: ToastComponent) {
    setTimeout(
      () => {
        toastObj.show();
      }, this.timeOutDelay);
  }

  public btnClick(): void {
    this.toastShow(this.toastInstance);
  }

  public onClick(e: ToastClickEventArgs): void {
    e.clickToClose = true;
  }

  public render() {
    return (
      <div>
        <div><ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
        <ToastComponent click={this.onClick = this.onClick.bind(this)} ref={toast => this.toastInstance = toast!} title='Warning !' content='There was a problem with your network connection.'
        position={this.position} created={this.toastCreated = this.toastCreated.bind(this)} />
      </div>
    );
  }
};
export default App;

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from "react";
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.timeOutDelay = 600;
        this.position = { X: 'Right', Y: 'Bottom' };
    }
    toastCreated() {
        this.toastShow(this.toastInstance);
    }
    toastShow(toastObj) {
        setTimeout(() => {
            toastObj.show();
        }, this.timeOutDelay);
    }
    btnClick() {
        this.toastShow(this.toastInstance);
    }
    onClick(e) {
        e.clickToClose = true;
    }
    render() {
        return (<div>
        <div><ButtonComponent cssClass="e-primary" onClick={this.btnClick = this.btnClick.bind(this)}> Show Bottom Position Toast</ButtonComponent></div>
        <ToastComponent click={this.onClick = this.onClick.bind(this)} ref={toast => this.toastInstance = toast} title='Warning !' content='There was a problem with your network connection.' position={this.position} created={this.toastCreated = this.toastCreated.bind(this)}/>
      </div>);
    }
}
;
export default App;

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));