I'm trying to build my first React project, and am currently putting together a burger nav button, and a menu which appears when clicking the nav.

I've broken this into two components; Hamburger and MenuOverlay. The code for both is below.

Currently I have an onClick on Hamburger toggling a class on it, but how would I also toggle the menu from that click? It's hidden with display: none; by default. Probably a very basic question so apologies - still trying to get my head around React.

MenuOverlay

import React from 'react';

import { Link } from 'react-router';



const MenuOverlay = () => {

    return (

        <div className=menuOverlay>

            <div className=innerMenu>

                <p><Link to=/>Home</Link></p>

                <p><Link to=/>About</Link></p>

                <p><Link to=/>Contact</Link></p>

            </div>

        </div>

    );

};



export default MenuOverlay;

Hamburger

import React, { Component } from 'react';



class Hamburger extends Component {

    constructor(props) {

        super(props);



        this.state = { active: '' };

        this.handleClick = this.handleClick.bind(this);

    }



    handleClick() {

        var toggle = this.state.active === 'is-active' ? '' : 'is-active';

        this.setState({active: toggle});

    }



    render() {



        return (

            <button className={`hamburger hamburger--emphatic fadein one ${this.state.active}`} onClick={this.handleClick} type=button>

                <span className=homeMenuTextButton>Menu</span>

                <span className=hamburger-box>

                    <span className=hamburger-inner></span>

                </span>

            </button>

        );

    }

}



export default Hamburger;