0

I have a boolean stored in sidebar in my navbar.js component. The thing is, these components do not have a parent-child relationship and I am adding the component using Router so I'm not sure if the props method works for this. App.js has a sibling called components and Navbar.js is inside Navbar/components. I would like to get a value stored in sidebar in navbar.js into App.js component. Is there a simple and best way to pass the value out of Navbar.js? Thank you

App.js:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

import Navbar from './components/Navbar/Navbar';
import Home from './pages/Home';
import Chat from './components/Chat/Chat';

import './App.css';
import 'bootstrap/dist/css/bootstrap.css';

function App() {
  
  return (
      <Router>
        <Navbar/>
        <div className={ sidebar ? 'content-shift-right' : ''}>
          <Switch>
            <Route path="/" exact component={Home}/>
            <Route path="/chat" component={Chat}/>
          </Switch>
        </div>
      </Router>
  );
}

export default App;

Navbar.js:

import React, { useState, useRef } from "react";
import { Link } from "react-router-dom";

import "./Navbar.css";
import { NavbarData } from "./NavbarData";
import * as AiIcons from "react-icons/ai";
import { IconContext } from "react-icons";

function Navbar() {
    
    const[ sidebar, toggleSidebar ] = useState(false);

    const showSidebar = () => {
        toggleSidebar(!sidebar);
    }

    return (
      <>
      <IconContext.Provider value={{ color: 'white' }}>
        <div className="navbar py-4 pl-5">
            <a className="navbar-brand" onClick={showSidebar}>Vaccine App</a>
        </div>
        <nav className={`nav-menu ${sidebar ? 'active' : ''}`}>
            <ul className="nav-menu-items">
                <li onClick={showSidebar} className="navbar-toggle d-flex align-items-center">
                    <Link to="#" className="cross-icon">
                        <AiIcons.AiOutlineClose/>
                    </Link>
                </li>
                {NavbarData.map((item, index) => {
                    return(
                        <li key={index} className={item.className}>
                            <Link to={item.path}>
                                {item.icon}
                             <span>{item.title}</span>
                            </Link>
                        </li>
                    )
                })}
            </ul>
        </nav>
        </IconContext.Provider>
      </>
    );
};

export default Navbar;
  • Check this https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs – Evren Aug 10 '21 at 08:23
  • @Evren Would that still work if the components don't have a parent-child relationship? –  Aug 10 '21 at 10:48
  • @Evren and what if I am using Router to add the component in? –  Aug 10 '21 at 11:11
  • The easiest (and most common) is either to lift state up into the common parent component, or use a 'global' store, like redux, more reading here - https://reactjs.org/docs/lifting-state-up.html and here - https://stackoverflow.com/questions/50330954/comparing-lifting-state-up-vs-redux-flux-state-management – andy mccullough Aug 10 '21 at 11:14

0 Answers0