Question 74330 in Reactjs Question posted in
The new location for the React Documentation can be found here.

onclick of sidebar item issue in react – Reactjs

i am trying to create a simple react project. it has a navbar, sidebar and the main content area.

first a home component is displayed.

home.js

import { useState } from "react";
import Navbar from "../navbar/navbar";
import Sidebar from "../sidebar/sidebar";
import "./style.css";
import { useSelector, useDispatch } from 'react-redux'

function Home() {
  const sidebarOpen = useSelector((state) => state.sidebarOpenState);
  

  return (
    <>
      <Navbar />

      <div className="home-box d-flex">
        {sidebarOpen && <div className="p-2 flex-fill"><Sidebar /></div>}
        
        
      </div>
    </>
  );
}

export default Home;

my navbar has a button which will change state sidebarOpen.

my sidebar looks like this->
sidebar.js

import "./style.css";
import { Link } from "react-router-dom";

function Sidebar() {
  return (
    <div className="divSidebar">
      <ul>
        <li>
          <Link to="/chess">
            <img className="sidebar-img" src="images/sidebar/chess.png"></img>
            <span className="sidebar-text">Chess</span>
          </Link>
        </li>
        <li>
          <Link to="/volleyball">
            <img
              className="sidebar-img"
              src="images/sidebar/volleyball.png"
            ></img>
            <span className="sidebar-text">Volleyball</span>
          </Link>
        </li>
        <li>
          <Link to="/football">
            <img
              className="sidebar-img"
              src="images/sidebar/football.png"
            ></img>
            <span className="sidebar-text">Football</span>
          </Link>
        </li>
        <li>
          <Link to="/tabletennis">
            <img
              className="sidebar-img"
              src="images/sidebar/table-tennis.png"
            ></img>
            <span className="sidebar-text">TableTennis</span>
          </Link>
        </li>
        <li>
          <Link to="/rugby">
            <img className="sidebar-img" src="images/sidebar/rugby.png"></img>
            <span className="sidebar-text">Rugby</span>
          </Link>
        </li>
      </ul>
    </div>
  );
}

export default Sidebar;

when i click on chess, the respective component should be loaded.
chess.js

function Chess() {
  return (
    <>
    <h1>chess</h1>
    </>
  );
}

export default Chess;

but the problem is my sidebar disappears. i only want the main content area to be changed nothing else. can someone help? let me know if u want to some more code.

———edit

i have added console.log in two places. one is in the navbar where the toggle method is defined and another is in redux store where toggle state is defined. both the places onclick is working. i am able to see message but the sidebar is not getting rendered.

———edit 2

App.js

import "./App.css";
import Navbar from "./components/navbar/navbar";
import { Route, Routes } from "react-router-dom";
import Chess from "./components/chess/chess";
import Volleyball from "./components/volleyball/volleyball";
import Football from "./components/football/football";
import TableTennis from "./components/tabletennis/tabletennis";
import Rugby from "./components/rugby/rugby";
import Home from "./components/home/home";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route exact path="/" element={<Home />} />

        <Route
          path="/chess"
          element={
            <>
              <Navbar />
              <Chess />
            </>
          }
        />

        <Route
          path="/volleyball"
          element={
            <>
              <Navbar />
              <Volleyball />
            </>
          }
        />

        <Route
          path="/tabletennis"
          element={
            <>
              <Navbar />
              <TableTennis />
            </>
          }
        />

        <Route
          path="/football"
          element={
            <>
              <Navbar />
              <Football />
            </>
          }
        />

        <Route
          path="/rugby"
          element={
            <>
              <Navbar />
              <Rugby />
            </>
          }
        />
      </Routes>
    </div>
  );
}

export default App;
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i found a way. i rendered <Sidebar /> again in all my child components.

    like this->

    chess.js

    function Chess() {
  const sidebarOpen = useSelector((state) => state.sidebarOpenState);

return (
{sidebarOpen && (
          <div className="p-2 flex-fill">
            <Sidebar />
          </div>
        )}
)
}

    this way when i click on button the state is updated and sidebar is rendered automatically.


  2. 0

    When you click on Chess you navigate to "/chess"

    So if u can’t see your Navbar there, is because you have to render it there too.

    Or, render the Navbar outside de Routes from BrowsterRouter.

    We need to see the components rendering on "/chess" and the react-router-dom config on app.js (or on the top lvl you declare it)

    —– edit ——

    Ok, look this:

    function App() {
return (
  <BrowserRouter>
    <NavBar />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/test" element={<Test />} />
    </Routes>
  </BrowserRouter>
 );
}

    If you refactor your brower like this is gona be more clean to understand the code and even easy to escale.

    As u see, the navBar is outside the Routes, so its gona be visible in all routes.

    then you can have this:

    -> one path -> one element

    your Links on navbar (or sidebar or whatelse) are gona work good.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search