CODEWITHSUNDEEP
javascriptreactjs
Robkwood
Robkwood

Reputation: 365

React - toggle display of one component from the onClick of another component

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;

Upvotes: 7

Views: 22243

Answers (2)

finalfreq
finalfreq

Reputation: 6980

In the most simplistic form you would have a container component that wraps around both of them and manages the state of the components. 

<MenuContainer>
 <Hamburger />
 <MenuOverlay />
</MenuContainer>

And in <MenuContainer> you would have a state of active some quick pseudocode.

class MenuContainer extends React.Component {
  constructor() {
    super();

    this.state = { active: false} 
  }

  toggleMenu = () => {

  // function that will toggle active/false
    this.setState((prevState) => {
      active: !prevState.active
    });
  }


  render() {
    return ( 
      <div>
        <Hamburger active={this.state.active} onClick={this.toggleMenu} />
        <MenuOverlay active={this.state.active} />
      </div>
    )
  }
}

so in hamburger you would just use the this.props.onClick to change the state of active and then in those corresponding components use the prop of this.props.active to determine what classes should be applied, etc.

Upvotes: 5

Michael Tontchev
Michael Tontchev

Reputation: 1139

Given that one element is not the parent of another element, you will have to pull up the variable keeping the toggle information up the chain of elements until it resides in one common place.

That is, keep the "active" state variable in an ancestor of the two elements and provide to the Hamburger a callback in the props that, when called, modifies the state of that ancestor component. At the same time, also pass the active state variable down to the MenuOverlay as a prop, and everything should work together.

See here for more information:

https://facebook.github.io/react/tutorial/tutorial.html#lifting-state-up

Specifically,

When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.

Upvotes: 1

Related Questions