I am a new programmer and I recently started following a music-player tutorial, and am experiencing a couple of issues with it.
Project Overview:
What I Have So Far:
As previously described, it is a music-player project made with create-react-app. It has 4 playlists, persian, rock, turkish, and house, whom all have their separate route-able .js page. The app is structured in a way so that all the routes to the pages are nested in the Navbar component.
Aside from the Navbar and Playlist.js components, I have also created LoginHandler.js and LoginForm.js components as well.
LoginForm.js is the Child Component and Serves as the overall look of the form, just a basic styling template. It also integrates properties such as onSubmit, on a count of its basic logic.
LoginHandler.jsis the Parent Component and serves as the entire login/logout logic, as well as providing basic authentication. The objective is for the user to be able to login, if it is successful, it will log “Logged In” on the console. If there are errors or if its unsuccessful, it will log “Details Do Not Match”. (I’ve attached the code below).
The Problem:
I am having having trouble integrating the parent Login component(LoginHandler.js) in the Navbar component. The objective is for the Navbar component to have a working login component, nested on its right side. (See picture below). How Would I be able to integrate the login component in the NavbarA component?
Note:
(Please correct my code and provide an example of the solution using the code I’ve provided below. Due to my novice skills, I am not familiar with any complex terms)
Thank You! 🙂
The Code:
NavbarA.js (navbar component/where the routing is)
import React, { Component } from 'react';
import { Navbar,Nav, Container } from 'react-bootstrap';
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom";
import Home from './Home';
import About from './About';
import Persian from './Persian';
import House from './House';
import Turkish from './Turkish';
import Rock from './Rock';
export default class NavbarA extends Component {
render() {
return (
<>
<div>
<Navbar bg="dark" variant={"dark"} expand="lg">
<Container>
<Navbar.Brand as={Link} to="/">
<img
src={process.env.PUBLIC_URL + "/spotifly.png"}
alt="logo"
/>
</Navbar.Brand>
<Navbar.Brand />
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to={"/"}>
Home
</Nav.Link>
<Nav.Link as={Link} to={"/about"}>
About
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
<div>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/persian" element={<Persian />} />
<Route path="/house" element={<House />} />
<Route path="/turkish" element={<Turkish />} />
<Route path="/rock" element={<Rock />} />
</Routes>
</div>
</>
);
}
}
LoginHandler.js (login logic & basic authentication)
import React, { useState } from "react";
import LoginForm from "./LoginForm";
function LoginHandler() {
const adminUser = {
name: "admin" ,
email: "admin@admin.com" ,
password: "admin123"
};
const [user, setUser] = useState({ name: "", email: "" });
const [error, setError] = useState("");
const Login = (details) => {
console.log(details);
if (
details.email === adminUser.email &&
details.password === adminUser.password
) {
console.log("Logged In");
setUser({
name: details.name,
email: details.email
});
} else {
console.log("Details Do Not Match");
setError("Details Do Not Match!");
}
};
const Logout = () => {
console.log("Logout");
setUser({ name: "", email: "" });
};
return (
<div className="App">
{user.email !== "" ? (
<div className="Welcome">
<h2>
Welcome, <span>{user.name}</span>{" "}
</h2>
<button onClick={Logout}>Logout</button>
</div>
) : (
<LoginForm Login={Login} error={error} />
)}
<div></div>
</div>
);
}
export default LoginHandler;
LoginForm.js*(login form & basic logic)*
import React, { useState } from "react";
function LoginForm({ Login, error }) {
const [details, setDetails] = useState({ name: "", email: "", password: "" });
const submitHandler = (e) => {
e.preventDefault();
Login(details);
};
return (
<form onSubmit={submitHandler}>
<div className="form-inner">
<h2>Login</h2>
{error != "" ? <div className="error">{error}</div> : ""}
<div className="form-group">
<label htmlFor="name"> Name</label>
<input
type="text"
name="name"
id="name"
onChange={(e) => setDetails({ ...details, name: e.target.value })}
value={details.name}
/>
</div>
<div className="form-group">
<label htmlFor="email">Email:</label>
<input
type="email"
name="email"
id="email"
onChange={(e) => setDetails({ ...details, email: e.target.value })}
value={details.email}
/>
</div>
<div className="form-group">
<label htmlFor="password">Password:</label>
<input
type="password"
name="password"
id="password"
onChange={(e) =>
setDetails({ ...details, password: e.target.value })
}
value={details.password}
/>
</div>
<input type="submit" value="LOGIN" />
</div>
</form>
);
}
export default LoginForm;
App.js
function App() {
return (
<div className="App">
<Router>
<NavbarA/>
</Router>
<div>
</div>
</div>
);
}
export default App;
Let me know what you think!
Thank you,
-Zpo
Advertisement
Answer
It’s a bit unclear if the problem you are facing is that you’re getting an error or if it’s purely a positioning problem.
Here’s something that might help if it’s purely a positioning problem:
.space-between {
justify-content: space-between;
}<Nav className="me-auto space-between">
<div>
<Nav.Link as={Link} to={ '/'}>
Home
</Nav.Link>
<Nav.Link as={Link} to={ '/about'}>
About
</Nav.Link>
</div>
<div>
<LoginHandler />
</div>
</Nav>