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

Question

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;

finalfreq · Accepted Answer · 2017-01-26 17:37:06Z

5

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.

answered Jan 26, 2017 at 17:37

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robkwood Over a year ago

Thank you for this. I've got it working but I had to change Hamburger and MenuOverlay to class-based components. Am I getting this right? I just have this nagging feeling they should be functional components, and I don't want to get into bad habits. MenuContainer jsfiddle.net/xtgq6La0 Hamburger jsfiddle.net/4jd24t85 MenuOverlay jsfiddle.net/5t2bsobc Thanks again

finalfreq Over a year ago

There are two questions to ask when considering a class vs functional component: Does this component have any state or do i need to use any of the component life cycle methods. If either of those are true then use the class component system otherwise just use pure functional components. In this case I'd say you are right to make those functional components

Michael Tontchev · Accepted Answer · 2017-01-26 17:33:19Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related