title: How Can I integrate my Login Component in Navbar?(Code Attached)
body: <p>I am a new programmer and I recently started following a music-player tutorial, and am experiencing a couple of issues with it.</p>
  <p><strong>Project Overview:</strong></p>
  <p><strong>What I Have So Far:</strong>
  As previously described, it is a music-player project made with create-react-app. It has 4 playlists, <code>persian</code>, <code>rock</code>, <code>turkish</code>, and <code>house</code>, whom all have their separate route-able <code>.js</code> page. The app is structured in a way so that all the routes to the pages are nested in the Navbar component.</p>
  <p>Aside from the Navbar and Playlist.js components, I have also created LoginHandler.js and LoginForm.js components as well.</p>
  <p><code>LoginForm.js</code> <strong>is the Child Component</strong> and Serves as the overall look of the form, just a basic styling template.  It also integrates properties such as <code> onSubmit</code>, on a count of its basic logic.</p>
  <p><code>LoginHandler.js</code><strong>is the Parent Component</strong> 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 &quot;Logged In&quot; on the console. If there are errors or if its unsuccessful, it will log &quot;Details Do Not Match”. (I’ve attached the code below).</p>
  <p><strong>The Problem:</strong></p>
  <p>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). <strong>How Would I be able to integrate the login component in the <code>NavbarA</code> component?</strong></p>
  <p><a href="https://i.stack.imgur.com/7Bj12.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Bj12.png" alt="enter image description here" /></a></p>
  <h3>Note:</h3>
  <p><strong>(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)</strong></p>
  <p>Thank You! :)</p>
  <h3>The Code:</h3>
  <p><strong>NavbarA.js</strong> <em>(navbar component/where the routing is)</em></p>
  <pre><code>import React, { Component } from 'react';
  import { Navbar,Nav, Container } from 'react-bootstrap';
  import {
      BrowserRouter as Router,
      Routes,
      Route,
      Link
    } from &quot;react-router-dom&quot;;
    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 (
        &lt;&gt;
          &lt;div&gt;
            &lt;Navbar bg=&quot;dark&quot; variant={&quot;dark&quot;} expand=&quot;lg&quot;&gt;
              &lt;Container&gt;
                &lt;Navbar.Brand as={Link} to=&quot;/&quot;&gt;
                  &lt;img
                    src={process.env.PUBLIC_URL + &quot;/spotifly.png&quot;}
                    alt=&quot;logo&quot;
                  /&gt;
                &lt;/Navbar.Brand&gt;
                &lt;Navbar.Brand /&gt;
                &lt;Navbar.Toggle aria-controls=&quot;basic-navbar-nav&quot; /&gt;
                &lt;Navbar.Collapse id=&quot;basic-navbar-nav&quot;&gt;
                  &lt;Nav className=&quot;me-auto&quot;&gt;
                    &lt;Nav.Link as={Link} to={&quot;/&quot;}&gt;
                      Home
                    &lt;/Nav.Link&gt;
                    &lt;Nav.Link as={Link} to={&quot;/about&quot;}&gt;
                      About
                    &lt;/Nav.Link&gt;
                  &lt;/Nav&gt;
                &lt;/Navbar.Collapse&gt;
              &lt;/Container&gt;
            &lt;/Navbar&gt;
          &lt;/div&gt;
          &lt;div&gt;
          &lt;Routes&gt;
              &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
              &lt;Route path=&quot;/about&quot; element={&lt;About /&gt;} /&gt;
              &lt;Route path=&quot;/persian&quot; element={&lt;Persian /&gt;} /&gt;
              &lt;Route path=&quot;/house&quot; element={&lt;House /&gt;} /&gt;
              &lt;Route path=&quot;/turkish&quot; element={&lt;Turkish /&gt;} /&gt;
              &lt;Route path=&quot;/rock&quot; element={&lt;Rock /&gt;} /&gt;
            &lt;/Routes&gt;
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  </code></pre>
  <p><strong>LoginHandler.js</strong> <em>(login logic &amp; basic authentication)</em></p>
  <pre><code>import React, {  useState } from &quot;react&quot;;
  
  import LoginForm from &quot;./LoginForm&quot;;
  
  function LoginHandler() {
    const adminUser = {
          name: &quot;admin&quot; ,
          email: &quot;admin@admin.com&quot; ,
          password: &quot;admin123&quot;
        };
  
    const [user, setUser] = useState({ name: &quot;&quot;, email: &quot;&quot; });
    const [error, setError] = useState(&quot;&quot;);
  
    const Login = (details) =&gt; {
      console.log(details);
  
      if (
        details.email === adminUser.email &amp;&amp;
        details.password === adminUser.password
      ) {
        console.log(&quot;Logged In&quot;);
        setUser({
          name: details.name,
          email: details.email
        });
      } else {
        console.log(&quot;Details Do Not Match&quot;);
        setError(&quot;Details Do Not Match!&quot;);
      }
    };
  
    const Logout = () =&gt; {
      console.log(&quot;Logout&quot;);
      setUser({ name: &quot;&quot;, email: &quot;&quot; });
    };
    return (
      &lt;div className=&quot;App&quot;&gt;
        {user.email !== &quot;&quot; ? (
          &lt;div className=&quot;Welcome&quot;&gt;
            &lt;h2&gt;
              Welcome, &lt;span&gt;{user.name}&lt;/span&gt;{&quot; &quot;}
            &lt;/h2&gt;
            &lt;button onClick={Logout}&gt;Logout&lt;/button&gt;
          &lt;/div&gt;
        ) : (
          &lt;LoginForm Login={Login} error={error} /&gt;
        )}
  
        &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default LoginHandler;
  
  </code></pre>
  <p><strong>LoginForm.js</strong>*(login form &amp; basic logic)*</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  function LoginForm({ Login, error }) {
    const [details, setDetails] = useState({ name: &quot;&quot;, email: &quot;&quot;, password: &quot;&quot; });
  
    const submitHandler = (e) =&gt; {
      e.preventDefault();
      Login(details);
    };
  
    return (
      &lt;form onSubmit={submitHandler}&gt;
        &lt;div className=&quot;form-inner&quot;&gt;
          &lt;h2&gt;Login&lt;/h2&gt;
          {error != &quot;&quot; ? &lt;div className=&quot;error&quot;&gt;{error}&lt;/div&gt; : &quot;&quot;}
  
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;label htmlFor=&quot;name&quot;&gt; Name&lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;name&quot;
              id=&quot;name&quot;
              onChange={(e) =&gt; setDetails({ ...details, name: e.target.value })}
              value={details.name}
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;label htmlFor=&quot;email&quot;&gt;Email:&lt;/label&gt;
            &lt;input
              type=&quot;email&quot;
              name=&quot;email&quot;
              id=&quot;email&quot;
              onChange={(e) =&gt; setDetails({ ...details, email: e.target.value })}
              value={details.email}
            /&gt;
          &lt;/div&gt;
          &lt;div className=&quot;form-group&quot;&gt;
            &lt;label htmlFor=&quot;password&quot;&gt;Password:&lt;/label&gt;
            &lt;input
              type=&quot;password&quot;
              name=&quot;password&quot;
              id=&quot;password&quot;
              onChange={(e) =&gt;
                setDetails({ ...details, password: e.target.value })
              }
              value={details.password}
            /&gt;
          &lt;/div&gt;
          &lt;input type=&quot;submit&quot; value=&quot;LOGIN&quot; /&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    );
  }
  
  export default LoginForm;
  
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
  
        &lt;Router&gt;
          &lt;NavbarA/&gt;
        &lt;/Router&gt;
        &lt;div&gt;
      
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Let me know what you think!</p>
  <p><strong>Thank you,</strong></p>
  <p><strong>-Zpo</strong></p>