import React from 'react';

class Element extends React.Component {
    constructor(props) {
        super(props);
        this.state = {menuOpen:false};
    }
    render() {
        return (
            <>
                <h1 onClick={()=>this.toggleMenuOpen()} style={{"cursor":"pointer"}}>Klikni me</h1>
                {this.state.menuOpen?<Menu text="Debeli daro testira debeli meni" />:""}
            </>
        );
    }
    toggleMenuOpen() {
        this.setState(prevstate => ({
            menuOpen:!prevstate.menuOpen
        }));
    }
}

class Menu extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div className="menu" style={{"backgroundColor": "#333", "width": "100px", "height": "100px"}}>
                {this.props.text}
            </div>
        );
    }
}

export default Element;