React using Hooks to handle Conditional Rendering of Links - reactjs

Question

I am trying to do some basic conditional rendering based on user login. I have my event handlers and axios call in a Login component.
const Login = () => {
const handleChange = event => {
setCustomerLogin({
...customerLogin,
[event.target.name]: event.target.value
});
};
const handleSubmit = e => {
e.preventDefault();
axios
.post("/api/Authentication", customerLogin)
.then(function(response) {
setCustomerLogin(response.data);
console.log(response);
})
.catch(function(error) {
console.log(error);
});
};
My Navbar component is very basic right now and just automatically renders my SignedOutLinks, which are the links I display before a user is logged in.
const Navbar = () => {
return (
<nav className="nav-wrapper blue darken-4">
<div className="container">
<Link to='/' className="brand-logo left">Cars4U</Link>
<SignedOutLinks />
</div>
</nav>
)
};
I would like to define my setCustomerLogin function in App.js and have my Login component call this value. This is my App.js file so far, I am just uncertain how to define the function in my App.js and set the state in my Login component
const [customerLogin, setCustomerLogin] = useState([
{ username: "", password: "" }
]);
function App() {
return(
<div className="App">
<Navbar />
<Switch>
<Route path='/login' component={Login}/>
<Route path='/signup' component={Signup}/>
</Switch>
</div>
);
}

Answer 1

You can pass the state setter(setCustomerLogin) and state value(customerLogin) down to your Login component as props:
const [customerLogin, setCustomerLogin] = useState([
{ username: "", password: "" }
]);
function App() {
return(
<div className="App">
<Navbar />
<Switch>
<Route path='/signup' component={Signup}/>
<Route
path="/login"
render={() =>
<Login
customerLogin={customerLogin}
setCustomerLogin={setCustomerLogin}
/>}
/>
</Switch>
</div>
);
}
Note that I used a little different syntax for routing the Login component, you are still going to get the same result, only that now you can pass in any props you want to the component to render. You can read more about that kind of routing here.
And then, you can access them in the Login component via props:
const Login = ({setCustomerLogin, customerLogin}) => {
const handleChange = event => {
setCustomerLogin({
...customerLogin,
[event.target.name]: event.target.value
});
};
const handleSubmit = e => {
e.preventDefault();
axios
.post("/api/Authentication", customerLogin)
.then(function(response) {
setCustomerLogin(response.data);
console.log(response);
})
.catch(function(error) {
console.log(error);
});
};