Pass information between components without Reactjs hierarchy

Question

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

In this situation I have a button and a menu. The menu should open every time the button is clicked.

Knob

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;

Answer 1

React uses a "top-down" approach to pass data between components. In this way, it is only possible to pass data to the child components.

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

To do (1) let’s set a state for the Dashboard component:

this.state = { isMenuOpen: false }

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

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

After that, you need to pass this.state.isMenuOpen to the Menu component and toggleMenu() to the Navbar component. Your final code would look more or more like the one shown 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>
    );
  }
}

As your case is simple, making only a few changes it was possible to share data between "sibling" components. In more complex cases, it may be necessary to make use of state management libraries such as the Redux and Mobx. But the idea is always to start more simply without the use of libraries and use only when necessary.