I am facing an issue with my NavBar that changes based on certain events. The current setup works fine, but I don't want to render it in every class that loads a new page. Initially, I had the NavBar rendering inside App.js so it could appear on all pages, but I struggled with passing values to change it correctly. I'm looking for a solution where I don't have to pass the same variables to every class that loads a new page. How can I resolve this?
Here is the code for my NavBar:
import React from 'react';
import '../App.css';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
export default function NavBar(props){
const logged = props.logged;
const baseTabs = props.baseTabs;
return (
<nav>
<Link style={{color: 'white', textDecoration: 'none'}} to='/'>
<h3>Aura Flows</h3>
</Link>
<ul className='nav-links'>
{baseTabs && <Link style={{color: 'white', textDecoration: 'none'}} to='/faq'> <li>FAQ</li> </Link> }
{baseTabs && <Link style={{color: 'white', textDecoration: 'none'}} to='/pricing'> <li>Pricing</li> </Link> }
{!logged && <Link style={{color: 'white', textDecoration: 'none'}} to='/login'> <li>Login</li> </Link> }
{!logged && <Link style={{color: 'white', textDecoration: 'none'}} to='/signup'> <li>Sign Up</li> </Link> }
{logged && <Link style={{color: 'white', textDecoration: 'none'}} to='/logout'> <li>Logout</li> </Link> }
</ul>
</nav>
);
}
NavBar.propTypes = {
logged: PropTypes.bool.isRequired,
baseTabs: PropTypes.bool.isRequired
}
One Class that dynamically changes NavBar values:
import React, {useState} from 'react';
import { Redirect } from 'react-router-dom';
import { Link } from 'react-router-dom';
import { auth } from "../Components/firebase";
import '../App.css';
import '../css/SignUp.css';
import NavBar from '../Components/NavBar';
function SignUpPage(){
const [logged, setLogged] = useState(false);
const [baseTabs, setBaseTabs] = useState(true);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const signup = event => {
event.preventDefault();
console.log("Sign Up function");
console.log(username + password)
auth.createUserWithEmailAndPassword(username, password).then(cred => {
// console.log(cred.user)
})
setBaseTabs(true);
setLogged(true);
}
if(logged === true){
return (<Redirect to='/home'/>)
}
return (
<div>
<NavBar logged={logged} baseTabs={baseTabs}/>
<form className='signUpBox' id='signup-form'>
<h1>Sign Up</h1>
<input type='text' name='username' placeholder='Username' onChange={ e => {setUsername(e.target.value)}} required/>
<input type='password' name='password' placeholder='Password' onChange={ e => {setPassword(e.target.value)}} required/>
<input type='password' name='confirmPassword' placeholder='Confirm Password' onChange={ e => {setConfirmPassword(e.target.value)}} required/>
<input type='submit' name='' value='Sign Up' onClick={signup}/>
</form>
</div>
);
}