props in app does not work in other component - reactjs

Question

Currently I'm working on a project for a customer. I am building my frontend in ReactJs and I should use a loggedIn check. While I'm loggedIn I want to change my button Log Out. And by a product I want to show in cart, but it does not show anything at all by loggedIn: true in App.js
Code:
App.js
state = {
name: "Tapijtboerderij",
winkelmand: 0,
gebruiker: null,
product: null,
loggedIn: true
}
render() {
return (
<div className="App" >
<Menu props={this.state} />
}
Menu.js (made in React.Router)
A line of code to router to component.
import React from 'react'
import { BrowserRouter as Router, Route } from "react-router-dom";
import LinkTo from './link';
import Index from "../pages/index";
import Tapijt from "../pages/tapijt";
import Vloeren from "../pages/vloeren";
import Zonwering from "../pages/zonwering";
import Gordijnen from "../pages/gordijnen";
import Contact from "../pages/contact";
import Login from "../pages/login";
import Product from "../pages/product";
import Page404 from "../pages/404";
import AlgemeneVoorwaarden from "../voorwaarden/algemene-voorwaarden";
import CookieBeleid from "../voorwaarden/cookie-beleid";
import PrivacyBeleid from "../voorwaarden/privacy-beleid";
import Sitemap from "../voorwaarden/sitemap";
import logo from "../logo/logo.jpg";
import Button from "./button";
export default class Menu extends React.Component {
constructor(props) {
super(props);
this.state = {
collapsed: false,
widthOverlay: 0
}
}
collapseMenu = () => {
let strepen = document.querySelectorAll(".streep");
if (this.state.collapsed === false) {
strepen[0].style.transform = "rotate(-45deg)";
strepen[0].style.marginTop = "7px";
strepen[1].style.display = "none";
strepen[2].style.transform = "rotate(45deg)";
strepen[2].style.marginTop = "-7px";
this.setState({
collapsed: !this.state.collapsed,
widthOverlay: "60%"
});
} else {
strepen[0].style.transform = "rotate(0deg)";
strepen[0].style.marginTop = "0";
strepen[1].style.display = "block";
strepen[2].style.transform = "rotate(0deg)";
strepen[2].style.marginTop = "0";
this.setState({
collapsed: false,
widthOverlay: 0
})
}
}
render() {
return (
<Router>
<nav className="menu">
<div className="container">
<a href="/" className="brand-logo to-left">
<img src={logo} className={"menu-logo"} alt={"logo bedrijf"} />
</a>
<div className={"links to-right menu-laptop"}>
<div className={"menu-links-laptop"}>
<LinkTo to="/" name={"Home"} />
<LinkTo to="/src/pages/tapijt" name={"Tapijt"} />
<LinkTo to="/src/pages/vloeren" name={"Vloeren"} />
<LinkTo to="/src/pages/zonwering" name={"Zonwering"} />
<LinkTo to="/src/pages/gordijnen" name={"Gordijnen"} />
<LinkTo to="/src/pages/contact" name={"Contact"} />
{this.props.loggedIn ? <Button link={"/src/pages/login"} buttonName={"Log uit"} /> : <Button link={"/src/pages/login"} buttonName={"Log in"} />}
</div>
</div>
</div>
</nav>
<div className="sidenav" id="mobile-demo" style={{
width: `${this.state.widthOverlay}`
}}>
<div className={"menu-icon"} onClick={this.collapseMenu}>
<div className={"strepen"}>
<div className={"streep"} />
<div className={"streep"} />
<div className={"streep"} />
</div>
</div>
<div className={"links-mobile"}>
<LinkTo to="/" name={"Home"} />
<LinkTo to="/src/pages/tapijt" name={"Tapijt"} />
<LinkTo to="/src/pages/vloeren" name={"Vloeren"} />
<LinkTo to="/src/pages/zonwering" name={"Zonwering"} />
<LinkTo to="/src/pages/gordijnen" name={"Gordijnen"} />
<LinkTo to="/src/pages/contact" name={"Contact"} />
<LinkTo to="/src/pages/login" name={"Log in"} />
</div>
</div>
<Route path="/" exact component={Index} />
<Route path="/src/pages/tapijt" component={<Tapijt loggedIn={this.props.loggedIn} />} />
<Route path="/src/pages/vloeren" component={Vloeren} />
<Route path="/src/pages/zonwering" component={Zonwering} />
<Route path="/src/pages/gordijnen" component={Gordijnen} />
<Route path="/src/pages/contact" component={Contact} />
<Route path="/src/pages/login" component={Login} />
<Route path="/src/pages/product" component={Product} />
<Route path="/src/pages/404" component={Page404} />
<Route path="/src/voorwaarden/algemene-voorwaarden" component={AlgemeneVoorwaarden} />
<Route path="/src/voorwaarden/cookie-beleid" component={CookieBeleid} />
<Route path="/src/voorwaarden/privacy-beleid" component={PrivacyBeleid} />
<Route path="/src/voorwaarden/sitemap" component={Sitemap} />
</Router >
);
}
}
Tapijt.js
render() {
return (
<div className={"container"}>
<h1 className={"header"}>Tapijten</h1>
<div className={"parent"}>
<div className={"flex"}>
{tapijten.map((tapijt, identifier) =>
<Card key={identifier}
photo={TapijtImg}
productHeader={tapijt}
productContent={"Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of \"de Finibus Bonorum et Malorum\" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, \"Lorem ipsum dolor sit amet..\", comes from a line in section 1.10.32."}
link={"./product"}
buttonName={"Ga naar Product"}
loggedIn={this.state.loggedIn} />)}
</div>
</div>
</div>
)
}
Product.js
import React from 'react';
import ProductImage from "../images/tapijt.jpg";
import Button from "../components/button";
let productSpecifications = [["Lengte: ", 1200], ["Breedte: ", 1000], ["Soort: ", "Hoogpolig
saxony"], ["Prijs per vierkante M(2): ", 4.85]];
class Product extends React.Component {
constructor(props) {
super(props);
this.state = {
data: productSpecifications
}
}
render() {
return (
<div className={"container top-40"}>
<div className={"flex half-om-half"}>
<div className={"product-photo"}>
<img src={ProductImage} className={"product-img"} alt={"product foto"} />
</div>
<div className={"product-info"}>
<h1 className={"product-header"}>Product Header can Kania</h1>
<p>
Is it possible to use CSS pseudo-classes to select even and odd instances of list items?
I'd expect the following to produce a list of alternating colors, but instead I get a list of blue items:
</p>
<h2 className={"product-price"}>679,-</h2>
{/*{this.props.loggedIn ? <Button link={"#"} buttonName={"In Winkelmand"} /> : ""}*/}
{this.props.loggedIn ? <Button backgroundColor={"var(--success-color)"} color={"var(--white)"} link={"#"} buttonName={"In Winkelmand"} /> : ""}
</div>
</div>
<div className={"product-specifications"}>
<h2>Details</h2>
<table>
<tbody>
{this.state.data.map((data) => <ul>{data}</ul>)}
</tbody>
</table>
</div>
</div>
)
}
}
export default Product;
Thank you in advance

Answer 1

First of all your Route is wrong.
<Route path="/src/pages/tapijt" component={<Tapijt loggedIn={this.props.loggedIn} />} />
It should be
<Route path="/src/pages/tapijt" render={(props) => (<Tapijt loggedIn={this.props.loggedIn} {...props}/>)}/>
Unless you handle it somewhere else not showing in current code snippet, you pass the loggedIn value to Tapijt component but you don't handle it somehow. you are using a state property loggedIn.
Maybe this
buttonName={"Ga naar Product"}
loggedIn={this.state.loggedIn} />)}
should be this?
buttonName={"Ga naar Product"}
loggedIn={this.props.loggedIn} />)}

Answer 2

just to be on the same page.
You are passing your Props Object called state from App.js to the Menu Component.
So I assume that you check for the this.props.state inside the Menu Component right ?
<Route path="/src/pages/tapijt" component={<Tapijt loggedIn={this.props.loggedIn} />} />
Where does this line of code comes from ?
Right now I'm missing the context, where you pass your Props ( loggedIn: true / false ) to your Product.js
It would be great if you could share the could over CodePen or JSFiddle for e.g.
EDIT:
You can try doing it like this:
// Inside of App.js
const userInfo = {
name: "Tapijtboerderij",
winkelmand: 0,
gebruiker: null,
product: null,
loggedIn: true
}
render() {
return (
<div className="App" >
<Menu {...userInfo} />
</div>
}
// Inside of Menu.js
export default class Menu extends React.Component {
...
constructor(props) {
super(props);
this.state = {
collapsed: false,
widthOverlay: 0
}
}
...
render() {
return(
<Router>
<nav className="menu">
<div className="container">
<a href="/" className="brand-logo to-left">
<img src={logo} className={"menu-logo"} alt={"logo bedrijf"} />
</a>
<div className={"links to-right menu-laptop"}>
<div className={"menu-links-laptop"}>
<LinkTo to="/" name={"Home"} />
<LinkTo to="/src/pages/tapijt" name={"Tapijt"} />
<LinkTo to="/src/pages/vloeren" name={"Vloeren"} />
<LinkTo to="/src/pages/zonwering" name={"Zonwering"} />
<LinkTo to="/src/pages/gordijnen" name={"Gordijnen"} />
<LinkTo to="/src/pages/contact" name={"Contact"} />
{this.props.loggedIn ? <Button link={"/src/pages/login"} buttonName={"Log uit"} /> : <Button link={"/src/pages/login"} buttonName={"Log in"} />}
</div>
</div>
</div>
</nav>
...
</Router>
)
}
...
}
// Inside of Product.js
class Product extends React.Component {
constructor(props) {
super(props);
this.state = {
data: productSpecifications
}
}
...
render() {
return(
...
{this.props.loggedIn ? <Button backgroundColor={"var(--success-color)"} color={"var(--white)"} link={"#"} buttonName={"In Winkelmand"} /> : ""}
...
)
}
}
```
By using the Spread Attributes like so: `...userInfoà it also make it easy to pass unnecessary props to components.
I hope it helps you.