Passing information between components without ReactJS hierarchy

Question

Passing information between components without ReactJS hierarchy

Navigation

#1 by (1 votes)

0

How to pass information between components in React as props or status.

In this situation I have a button and a menu. The menu must be opened every time the button is clicked.

Button

import React, { Component } from 'react';
import './Navbar.css';

class Navbar
 extends Component {
    state = {  }
    render() { 
        return ( 
            <nav>
                <button className="MenuSlide">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </nav>
         );
    }
}

export default Navbar;

Menu

import React, { Component } from 'react';

class Menu extends Component {

    render() { 
        return (
            <aside>
                {this.props.children}
            </aside>
        );
    }
}

export default Menu;

Page where the components are.

import React, { Component } from 'react';

/* Components */
import Navbar from '../../component/top/Navbar';
import Menu from '../../component/sideBar/Menu';
import Main from "../../component/sideCenter/Main";

class Dashboard extends Component {

    render() {
        return (
            <div className="App" data>
                <Navbar />
                <Menu />
            </div>
        );
    }
}

export default Dashboard;

ecmascript-6 react jsx

asked by anonymous 21.08.2018 / 12:50

1 answer

Margin within table How to configure paging method on Node Express?

score 1 · Accepted Answer

React uses a top-down approach to passing data between components . This way, you can only pass data to child components.

In your case to share data between siblings (Navbar and Menu) you need the parent component (Dashboard) (1) to save the information if the menu is open or not; and (2) provide a way to change the status of the menu.

To do (1) let's define a state for the Dashboard component:

this.state = { isMenuOpen: false }

To do (2) let's create a method that toggles the status of the menu:

toggleMenu() {
  this.setState({isMenuOpen: !this.state.isMenuOpen})
}

After that, you need to pass this.state.isMenuOpen to the Menu component and the toggleMenu () function for the Navbar component. Your final code would look more or less like the one below:

function NavBar(props) {
  const { toggleMenu } = props;
  return <button onClick={toggleMenu}>Botão</button>
}

function Menu(props) {
  const style = {
    display: props.isOpen ? 'block' : 'none'
  }

  return <aside style={style}>Menu {isMenuOpen}</aside>
}

class Dashboard extends React.Component {
  constructor(props) {
      super(props);

      this.state = { 
         isMenuOpen: false 
      }

     this.toggleMenu = this.toggleMenu.bind(this)
  }

  toggleMenu() {
    this.setState({isMenuOpen: !this.state.isMenuOpen})
  }

  render() {
    return (
        <div>
          <NavBar toggleMenu={this.toggleMenu} />
          <Menu isOpen={this.state.isMenuOpen} />
        </div>
    );
  }
}

Because your case is simple, making only a few changes allowed you to share data between "sibling" components. In more complex cases, it may be necessary to make use of state management libraries such as Redux and MobX . But the idea is always to start simpler without the use of libraries and use only when needed.