Develop Reference

onclick of sidebar item issue in react

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;

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.

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.

How to hide a component whilst a path is active in react.js?

I was trying to implement the following functionality in my web app:
Some components in my App.js should be hidden once a path is active as per below:
import './App.css';
import { Route, Routes, Link, Redirect, Navigate } from "react-router-dom";
import { useEffect, useState } from 'react';
import SearchBar from "./components/searchBar";
import Main from './components/main';
import Login from './components/login';
import Register from './components/register';
function App() {
return (
<div className="App">
<nav className="navbar">
<div className="logo"><img src='https://cdn-icons-png.flaticon.com/512/201/201623.png' /></div>
<h1 className="title">Travel.com</h1>
<ul className='menu'>
<li className="link"><Link style={{ textDecoration: "none", color: "white" }} to='/login'>Log-in</Link></li>
<li className="link"><Link style={{ textDecoration: "none", color: "white" }} to='/register'>Register</Link></li>
</ul>
</nav>
{
<Routes>
<Route path='/login' element={<Login />}></Route>
<Route path='/register' element={<Register />}></Route>
</Routes>
}
<SearchBar className='search-compon' />
<Main className='content' />
</div>
I would like to hide the SearchBar component and the Main component whilst the path of either /login or /register is active.
How to do that ?

You can do this by using a useEffect that evaluates the path and sets a useState variable accordingly.
const [isActive, setIsActive] = useState(false);
useEffect(() => {
if (
window.location.pathname == '/login' ||
window.location.pathname == '/register'
) {
setIsActive(true);
}
}, []);
But this will only work if you start in one of the paths meaning you don't get there from pressing one of the buttons but by searching the specific link. You can apply the effect to the links as well by adding an onClick event.
<Link
style={{
textDecoration: 'none',
color: 'white',
}}
to='/login'
onClick={() => setIsActive(true)}
>
Log-in
</Link>
Now the state changes bo matter how you reach the path, now we just need to make some conditional rendering for the two components. this can be done like:
{!isActive && (
<>
<SearchBar />
<Main />
</>
)}
And now it should all work!

Having Trouble rendering React Resume & Portfolio components - Header, Footer, & Profile components are all rendering fine

I'm having issues rendering my Portfolio & Resume components.
I think the issue may be react-router related.
Here is my appjs file:
import React from 'react';
import Profile from './components/Profile/Profile'
import Header from './components/Header/Header'
import Footer from './components/Footer/Footer'
import Portfolio from './pages/Portfolio/Portfolio'
import Resume from './pages/Resume/Resume'
import {
Button,
Form,
FormControl,
Nav,
NavLink,
NavDropdown,
} from 'react-bootstrap';
import { BrowserRouter as Router, Switch, Route, } from 'react-router-dom'
import './App.css';
function App() {
return (
<Container className={'top_60'}>
{/* *Container adds space on both edges or sides of the page* */}
{/* Profile.js line 36 */}
<Grid container spacing={7}>
<Grid item xs={12}
sm={12}
md={4}
lg={3}>
<Profile/>
</Grid>
<Grid item xs>
<Router>
<Header />
<Switch>
<Nav.Link as={NavLink} to="/" />
<Route path="/portfolio">
<Portfolio />
</Route>
<Route path="/">
<Resume />
</Route>
</Switch>
</Router>
<Footer />
</Grid>
</Grid>
</Container>
);
}
export default App;
Resume & Portfolio component code as of right now:
1.Resumejs
import React from 'react'
const Resume = () => {
return (
<div>
Resume Page
</div>
)
}
export default Resume
2.Portfoliojs
import React from 'react'
const Portfolio = () => {
return (
<div>
Portfolio Page
</div>
)
}
export default Portfolio
I'm not getting any errors but the Portfolio & Resume components are both not rendering on the page.
Any suggestions would be appreciated.

<Switch> renders the first child that matches the location, in your case <Nav.Link as={NavLink} to="/" /> is being rendered.

Placing the Nav AFTER the Routes, within the Switch,
<Route path="/portfolio">
<Portfolio />
</Route>
<Route path="/">
<Resume />
</Route>
<Nav.Link as={NavLink} to="/" />
within the appjs file , seems to solve this issue.

What is the correct way to correctly visualize a component React in top of another?

I'm trying to properly render my different components with the HTML/CSS sidebar with React Routes and Apollo.
I have a sidebar that correctly renders to the left of the screen and a little navbar on top of it, the space for the component is not being blocked by any css property.
The expected output is:
The actual output:
I've tried to place all the Routes inside the sidebar but every time I click on them, they don't load at all, the URL changes but the content doesn't and I need to reload the webpage for it take some effect. The help would be very much appreciated.
App.js
import React from 'react';
import ApolloClient from 'apollo-boost';
import {ApolloProvider} from '#apollo/react-hooks';
import { render } from 'react-dom';
import {BrowserRouter as Router, Route, Link,Switch} from 'react-router-dom';
import 'bootswatch/dist/flatly/bootstrap.min.css';
import Nav from './components/Nav'
import Home from './components/pages/Home'
import About from './components/pages/About'
import Articles from './components/article/Articles'
import Article from './components/article/Article'
const client = new ApolloClient({
uri: 'url in here'
});
const App = () => {
return (
<ApolloProvider client={client}>
<Router>
<div className="App">
<Nav/>
<Route exact path='/' component={Home} />
<Route exact path='/Articles' component={Articles} />
<Route exact path='/Articles/:id' component={Article} />
<Route exact path='/About' component={About} />
</div>
</Router>
</ApolloProvider>
);
}
render(<App />, document.getElementById('root'));
export default App;
Nav.js component
import React from 'react';
import {BrowserRouter as Link} from 'react-router-dom';
export default function Nav() {
return (
<div className="wrapper">
<nav id="sidebar">
<Link className="nav-link" to="/">
<h3>Home</h3>
</Link>
.
.
.
</nav>
<div id="content">
<nav className="navBar" >
</nav>
<div className ="ComponentRender">
Here's where the component should be rendered
</div>
</div>
</div>
)
}

I don't know about Apollo but I think you should move your routes from the App component to the Nav component, so the code would be:
App component:
const App = () => {
return (
<ApolloProvider client={client}>
<Router>
<div className="App">
<Nav/>
</div>
</Router>
</ApolloProvider>
);
}
And the Nav component:
export default function Nav() {
return (
<div className="wrapper">
<nav id="sidebar">
<Link className="nav-link" to="/">
<h3>Home</h3>
</Link>
.
.
.
</nav>
<div id="content">
<nav className="navBar" >
</nav>
<div className ="ComponentRender">
<Route exact path='/' component={Home} />
<Route exact path='/Articles' component={Articles} />
<Route exact path='/Articles/:id' component={Article} />
<Route exact path='/About' component={About} />
</div>
</div>
</div>
)
}
Don't forget to move imports from App to Nav as well.

react-bootstrap Navbar not rendering properly in React js

I am using bootstrap 4 with reactjs. Using react-bootstrap module, trying to render the Navbar , but somehow , it is not rendering properly.
i am using bootstrap 4 syntax in the code but not sure whether any module/lib is using any bootstrap syntax 3
here is the code (App.js) :
import React, { Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';
import News from './Components/pages/News';
import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Navbar />
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</div>
</Router>
);
}
}
export default App;
and the navbar.js :
import React, { Component } from 'react';
import ReactBootstrap, { Navbar, Nav, NavItem } from 'react-bootstrap';
import { Link } from 'react-router-dom';
class CustNavbar extends Component {
render() {
return (
<Navbar default collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">CodeLife</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} componentClass={Link} to="/">
Home
</NavItem>
<NavItem eventKey={2} componentClass={Link} to="/about">
About
</NavItem>
<NavItem eventKey={3} componentClass={Link} to="/news">
News
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
export default CustNavbar;
what is happening
now the issue, there is no any compilation error , but somehow , Navigation bar is not rendering properly. Not sure whether the issue with version syntax or the implementation itself. please suggest
what is expected
Navigation bar should appear in the homepage before Grid/container
EDIT 1:
I have modified the code as suggested . please below :
App.js
import React, { Fragment, Component } from 'react';
import Header from './Components/HeaderComponents/header';
import Footer from './Components/FooterComponents/footer';
import Homepage from './Components/pages/homePage';
import CorporateTraining from './Components/pages/corporateTraining';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import CustNavbar from './Components/pages/navbar';
import About from './Components/pages/About';
import News from './Components/pages/News';
import ReactBootstrap, { Navbar, Nav, NavItem, Jumbotron, Container, Row, Column, Image, Button } from 'react-bootstrap';
import './Assets/css/default.min.css';
class App extends Component {
render() {
return (
<Fragment>
<Navbar />
<div className="App">
<Router>
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</Router>
</div>
</Fragment>
);
}
}
export default App;
Regards,

I'm not really sure as its too unclear. But try moving your navbar on top of router as i assume that className App have styling in them. Let me know
import React, { Fragment, Component } from 'react';
...
return (
<Fragment>
<Navbar />
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/news" component={News} />
</Switch
</Router>
</div>
</Fragment>
)
Don't forget to add Fragment