Getting Started with KendoReact Popup

Copy Code<style>
  .popup-content {
    padding: 30px;
    color: #787878;
    background-color: #fcf7f8;
    border: 1px solid rgba(0,0,0,.05);
  }
</style>

Copy Codeclass AppComponent extends React.Component {
    anchor = null;
    constructor(props) {
        super(props);
        this.state = { show: false };
    }

    componentDidMount() {
        this.setState({show: true});
    }

    render() {
        return (
            <div>
                <button
                    className="k-button"
                    onClick={this.onClick}
                    ref={(button) => {
                        this.anchor = button;
                    }}
                >
                    {this.state.show ? 'Hide' : 'Show'}
                </button>
                <Popup
                    anchor={this.anchor}
                    show={this.state.show}
                    popupClass={'popup-content'}
                >
                    Popup content.
                </Popup>
            </div>
        );
    }

    onClick = () => {
        this.setState({ show: !this.state.show });
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);