We Keep Coding

How to change color of icon and text once clicked or hovering?

I'm new to coding and working on project right now. I currently have a side Navbar and I'm trying to get the icon and text to change color when I either hover over it, or once I click on that route, (for example, if I click on Home) it'll stay blue, until I click on another link, and keeps it blue while I'm hovering over other links.
This is my code for my side navBar :
const Navbar = ({ handleClick, isLoggedIn, email }) => (
<div className="wrapper">
<nav
className="navbar navbar-expand d-flex flex-column align-item-center-start"
id="sidebar"
>
<a href="/" className="navbar-brand text-light mt-2">
<div className="display-6 font-weight-bold">
<span>SPODify +</span>
</div>
</a>
<ul className="navbar-nav d-flex flex-column w-100 mt-4">
<li className=" h-25 nav-item border-bottom">
<a href="/" className="nav-link text-light pl-4">
<i className="bi bi-house-door "></i>
HOME
</a>
</li>
<li className="h-25 nav-item border-bottom">
<a href="#" className="nav-link text-light ">
<i className="bi bi-search"></i>
SEARCH
</a>
</li>
<li className="nav-item h-10 border-bottom">
<a href="/show" className="nav-link text-light ">
<i className="bi bi-rainbow"></i>
PODCASTS
</a>
</li>
<li className="nav-item h-25 border-bottom">
<a href="#" className="nav-link text-light pl-4">
<i className="bi bi-collection"></i>
YOUR LIBRARY
</a>
</li>
{isLoggedIn ? (
<>
<li className="nav-item h-25 border-bottom">
<a href="/login" className="nav-link text-light pl-4">
<i className="bi bi-person-circle"></i>
{email}
</a>
</li>
<li className="nav-item h-25 border-bottom">
<a
href="#"
onClick={handleClick}
className="nav-link text-light pl-4"
>
LOGOUT
</a>
</li>
</>
) : (
<li className="nav-item h-25 border-bottom">
<a href="/login" className="nav-link text-light pl-4">
LOGIN
</a>
</li>
)}
</ul>
</nav>
<div>
{isLoggedIn ? (
<div>
<Home email={email} />{" "}
</div>
) : (
<div>
<h1>WELCOME, SIGN UP</h1>
<Signup />
</div>
)}
</div>
</div>
);
I tried to achieve this by adding this to my CSS file:
nav a.nav-link:hover {
background-color: blue;
}
But this just makes the entire section blue :
Any tips on how I can change ONLY the icon and text when I hover over it and once I click on the link? Thanks in advance!
For reference, this is what I'm trying to achieve:
Currently clicked on Home link and hovering over Guests that's why it's both a different color

Your on the right way. To change the color of the text and icon you'll need to change background-color to color this css:
nav a.nav-link:hover {
color: blue;
}
Example:
a:hover{
color: blue;
}
<ul>
<li>
<a>My Test</a>
</li>
</ul>
For the active part (once you clicked) you need to add an extra class for that. (example: .active). Then you can style it the same way as when you are hovering it:
a:hover,
a.active{
color: blue;
}

Buttons on Navbar not aligned in reactJS

I am using the navbar from bootstrap 5. I having an UI issue.
What do I have?
This is the navbar I am currently having.
What do I want?
I want to align the navbar buttons (Login and Signup) to the right end.
import React from "react";
import { Link, useNavigate } from "react-router-dom";
const Navbar = (props) => {
let navigate = useNavigate();
const handleLogout = () => {
localStorage.removeItem("token");
console.log("hello");
navigate("/login");
props.showAlert("User Logged Out succesfully! ", "info");
};
return (
<>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
Navbar
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">
Home
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">
About
</Link>
</li>
</ul>
{!localStorage.getItem("token") ? (
<form className="d-flex">
<Link
className="btn btn-outline-success mx-2"
to="/signup"
role="button"
>
SignUp
</Link>
<Link
className="btn btn-outline-success"
to="/login"
role="button"
>
Login
</Link>
</form>
) : (
<form className="d-flex">
<button
className="btn btn-outline-success mx-2"
onClick={handleLogout}
>
LogOut
</button>
</form>
)}
</div>
</div>
</nav>
</>
);
};
export default Navbar;
I have tried many attempts but still, it is not working. I am using bootstrap built-in classes also.

You just need to add a me-auto class with <ul> as given <ul class="navbar-nav me-auto">
import React from "react";
import { Link, useNavigate } from "react-router-dom";
const Navbar = (props) => {
let navigate = useNavigate();
const handleLogout = () => {
localStorage.removeItem("token");
console.log("hello");
navigate("/login");
props.showAlert("User Logged Out succesfully! ", "info");
};
return (
<>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
Navbar
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">
Home
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">
About
</Link>
</li>
</ul>
{!localStorage.getItem("token") ? (
<form className="d-flex">
<Link
className="btn btn-outline-success mx-2"
to="/signup"
role="button"
>
SignUp
</Link>
<Link
className="btn btn-outline-success"
to="/login"
role="button"
>
Login
</Link>
</form>
) : (
<form className="d-flex">
<button
className="btn btn-outline-success mx-2"
onClick={handleLogout}
>
LogOut
</button>
</form>
)}
</div>
</div>
</nav>
</>
);
};
export default Navbar;

Just need to add me-auto in <ul> like this:
<ul className="navbar-nav me-auto">

React.js: Component not rendering or showing up at all

I'm integrating a bootstrap template into a react app and I'm having trouble getting two of the components- Home and ProductIndex - to render. When I inspect with the react dev tool the components aren't in the DOM at all. The html to follow has issues that I haven't begun to deal with yet, but for it not to render at all is mystifying me. Not sure what the problem is.
Here is the Home component
import React, { Component } from 'react'
class Home extends Component {
render() {
return (
<div>
<div className="modal fade" id="productView" tabindex="-1" role="dialog" aria-hidden="true">
<div className="modal-dialog modal-lg modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-body p-0">
<div className="row align-items-stretch">
<div className="col-lg-6 p-lg-0"><a className="product-view d-block h-100 bg-cover bg-center" style="background: url(img/product-5.jpg)" href="img/product-5.jpg" data-lightbox="productview" title="Red digital smartwatch"></a><a className="d-none" href="img/product-5-alt-1.jpg" title="Red digital smartwatch" data-lightbox="productview"></a><a className="d-none" href="img/product-5-alt-2.jpg" title="Red digital smartwatch" data-lightbox="productview"></a></div>
<div className="col-lg-6">
<button className="close p-4" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div className="p-5 my-md-4">
<ul className="list-inline mb-2">
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
<li className="list-inline-item m-0"><i className="fas fa-star small text-warning"></i></li>
</ul>
<h2 className="h4">Red digital smartwatch</h2>
<p className="text-muted">$250</p>
<p className="text-small mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut ullamcorper leo, eget euismod orci. Cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Vestibulum ultricies aliquam convallis.</p>
<div className="row align-items-stretch mb-4">
<div className="col-sm-7 pr-sm-0">
<div className="border d-flex align-items-center justify-content-between py-1 px-3"><span className="small text-uppercase text-gray mr-4 no-select">Quantity</span>
<div className="quantity">
<button className="dec-btn p-0"><i className="fas fa-caret-left"></i></button>
<input className="form-control border-0 shadow-0 p-0" type="text" value="1"/>
<button className="inc-btn p-0"><i className="fas fa-caret-right"></i></button>
</div>
</div>
</div>
<div className="col-sm-5 pl-sm-0"><a className="btn btn-dark btn-sm btn-block h-100 d-flex align-items-center justify-content-center px-0" href="cart.html">Add to cart</a></div>
</div><a className="btn btn-link text-dark p-0" href="#"><i className="far fa-heart mr-2"></i>Add to wish list</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="container">
<section className="hero pb-3 bg-cover bg-center d-flex align-items-center" style="background: url(img/hero-banner-alt.jpg)">
<div className="container py-5">
<div className="row px-4 px-lg-5">
<div className="col-lg-6">
<p className="text-muted small text-uppercase mb-2">New Inspiration 2020</p>
<h1 className="h2 text-uppercase mb-3">20% off on new season</h1><a className="btn btn-dark" href="shop.html">Browse collections</a>
</div>
</div>
</div>
</section>
<section className="pt-5">
<header className="text-center">
<p className="small text-muted small text-uppercase mb-1">Carefully created collections</p>
<h2 className="h5 text-uppercase mb-4">Browse our categories</h2>
</header>
<div className="row">
<div className="col-md-4 mb-4 mb-md-0"><a className="category-item" href="shop.html"><img className="img-fluid" src="img/cat-img-1.jpg" alt=""/><strong className="category-item-title">Clothes</strong></a></div>
<div className="col-md-4 mb-4 mb-md-0"><a className="category-item mb-4" href="shop.html"><img className="img-fluid" src="img/cat-img-2.jpg" alt=""/><strong className="category-item-title">Shoes</strong></a><a className="category-item" href="shop.html"><img className="img-fluid" src="img/cat-img-3.jpg" alt=""/><strong className="category-item-title">Watches</strong></a></div>
<div className="col-md-4"><a className="category-item" href="shop.html"><img className="img-fluid" src="img/cat-img-4.jpg" alt=""/><strong className="category-item-title">Electronics</strong></a></div>
</div>
</section>
<section className="py-5">
<header>
<p className="small text-muted small text-uppercase mb-1">Made the hard way</p>
<h2 className="h5 text-uppercase mb-4">Top trending products</h2>
</header>
<div className="row">
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-1.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Kui Ye Chen’s AirPods</a></h6>
<p className="small text-muted">$250</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-primary">Sale</div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-2.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Air Jordan 12 gym red</a></h6>
<p className="small text-muted">$300</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-3.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Cyan cotton t-shirt</a></h6>
<p className="small text-muted">$25</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-info">New</div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-4.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Timex Unisex Originals</a></h6>
<p className="small text-muted">$351</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-danger">Sold</div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-5.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Red digital smartwatch</a></h6>
<p className="small text-muted">$250</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-6.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Nike air max 95</a></h6>
<p className="small text-muted">$300</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-7.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Joemalone Women prefume</a></h6>
<p className="small text-muted">$25</p>
</div>
</div>
<div className="col-xl-3 col-lg-4 col-sm-6">
<div className="product text-center">
<div className="position-relative mb-3">
<div className="badge text-white badge-"></div><a className="d-block" href="detail.html"><img className="img-fluid w-100" src="img/product-8.jpg" alt="..."/></a>
<div className="product-overlay">
<ul className="mb-0 list-inline">
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-outline-dark" href="#"><i className="far fa-heart"></i></a></li>
<li className="list-inline-item m-0 p-0"><a className="btn btn-sm btn-dark" href="cart.html">Add to cart</a></li>
<li className="list-inline-item mr-0"><a className="btn btn-sm btn-outline-dark" href="#productView" data-toggle="modal"><i className="fas fa-expand"></i></a></li>
</ul>
</div>
</div>
<h6> <a className="reset-anchor" href="detail.html">Apple Watch</a></h6>
<p className="small text-muted">$351</p>
</div>
</div>
</div>
</section>
<section className="py-5 bg-light">
<div className="container">
<div className="row text-center">
<div className="col-lg-4 mb-3 mb-lg-0">
<div className="d-inline-block">
<div className="media align-items-end">
<svg className="svg-icon svg-icon-big svg-icon-light">
<use href="#delivery-time-1"> </use>
</svg>
<div className="media-body text-left ml-3">
<h6 className="text-uppercase mb-1">Free shipping</h6>
<p className="text-small mb-0 text-muted">Free shipping worlwide</p>
</div>
</div>
</div>
</div>
<div className="col-lg-4 mb-3 mb-lg-0">
<div className="d-inline-block">
<div className="media align-items-end">
<svg className="svg-icon svg-icon-big svg-icon-light">
<use href="#helpline-24h-1"> </use>
</svg>
<div className="media-body text-left ml-3">
<h6 className="text-uppercase mb-1">24 x 7 service</h6>
<p className="text-small mb-0 text-muted">Free shipping worlwide</p>
</div>
</div>
</div>
</div>
<div className="col-lg-4">
<div className="d-inline-block">
<div className="media align-items-end">
<svg className="svg-icon svg-icon-big svg-icon-light">
<use href="#label-tag-1"> </use>
</svg>
<div className="media-body text-left ml-3">
<h6 className="text-uppercase mb-1">Festival offer</h6>
<p className="text-small mb-0 text-muted">Free shipping worlwide</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="py-5">
<div className="container p-0">
<div className="row">
<div className="col-lg-6 mb-3 mb-lg-0">
<h5 className="text-uppercase">Let's be friends!</h5>
<p className="text-small text-muted mb-0">Nisi nisi tempor consequat laboris nisi.</p>
</div>
<div className="col-lg-6">
<form action="#">
<div className="input-group flex-column flex-sm-row mb-3">
<input className="form-control form-control-lg py-3" type="email" placeholder="Enter your email address" aria-describedby="button-addon2"/>
<div className="input-group-append">
<button className="btn btn-dark btn-block" id="button-addon2" type="submit">Subscribe</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<footer className="bg-dark text-white">
<div className="container py-4">
<div className="row py-5">
<div className="col-md-4 mb-3 mb-md-0">
<h6 className="text-uppercase mb-3">Customer services</h6>
<ul className="list-unstyled mb-0">
<li><a className="footer-link" href="#">Help & Contact Us</a></li>
<li><a className="footer-link" href="#">Returns & Refunds</a></li>
<li><a className="footer-link" href="#">Online Stores</a></li>
<li><a className="footer-link" href="#">Terms & Conditions</a></li>
</ul>
</div>
<div className="col-md-4 mb-3 mb-md-0">
<h6 className="text-uppercase mb-3">Company</h6>
<ul className="list-unstyled mb-0">
<li><a className="footer-link" href="#">What We Do</a></li>
<li><a className="footer-link" href="#">Available Services</a></li>
<li><a className="footer-link" href="#">Latest Posts</a></li>
<li><a className="footer-link" href="#">FAQs</a></li>
</ul>
</div>
<div className="col-md-4">
<h6 className="text-uppercase mb-3">Social media</h6>
<ul className="list-unstyled mb-0">
<li><a className="footer-link" href="#">Twitter</a></li>
<li><a className="footer-link" href="#">Instagram</a></li>
<li><a className="footer-link" href="#">Tumblr</a></li>
<li><a className="footer-link" href="#">Pinterest</a></li>
</ul>
</div>
</div>
<div className="border-top pt-4" style="border-color: #1d1d1d !important">
<div className="row">
<div className="col-lg-6">
<p className="small text-muted mb-0">© 2020 All rights reserved.</p>
</div>
<div className="col-lg-6 text-lg-right">
<p className="small text-muted mb-0">Template designed by <a className="text-white reset-anchor" href="https://bootstraptemple.com/p/bootstrap-ecommerce">Bootstrap Temple</a></p>
</div>
</div>
</div>
</div>
</footer>
</div>
)
}
}
export default Home
Here is the Header component (this is rendering)
import React, { Component } from 'react';
class Header extends Component {
render() {
return (
<header class="header bg-white">
<div class="container px-0 px-lg-3">
<nav class="navbar navbar-expand-lg navbar-light py-3 px-lg-0"><a class="navbar-brand" href="index.html"><span class="font-weight-bold text-uppercase text-dark">Boutique</span></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="detail.html">Product detail</a>
</li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="pagesDropdown" href="#nav" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<div class="dropdown-menu mt-3" aria-labelledby="pagesDropdown"><a class="dropdown-item border-0 transition-link" href="index.html">Homepage</a><a class="dropdown-item border-0 transition-link" href="shop.html">Category</a><a class="dropdown-item border-0 transition-link" href="detail.html">Product detail</a><a class="dropdown-item border-0 transition-link" href="cart.html">Shopping cart</a><a class="dropdown-item border-0 transition-link" href="checkout.html">Checkout</a></div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="cart.html"> <i class="fas fa-dolly-flatbed mr-1 text-gray"></i>Cart<small class="text-gray">(2)</small></a></li>
<li class="nav-item"><a class="nav-link" href="#nav"> <i class="far fa-heart mr-1"></i><small class="text-gray"> (0)</small></a></li>
<li class="nav-item"><a class="nav-link" href="#nav"> <i class="fas fa-user-alt mr-1 text-gray"></i>Login</a></li>
</ul>
</div>
</nav>
</div>
</header>
)
}
}
export default Header;
Here is App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home/Home.js'
import Header from './Header/Header.js'
import ProductIndex from './ProductIndex/ProductIndex.js'
function App() {
return (
<div className="wrapper">
<Router>
<Switch>
<Header/>
<Route exact path="/" component={ Home } />
<Route exact path="/products" component={ ProductIndex } />
</Switch>
</Router>
</div>
);
}
export default App;
and index.js
import React from 'react'
import ReactDOM from 'react-dom'
// import './index.scss'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
const appJsx = (
<BrowserRouter>
<App />
</BrowserRouter>
)
ReactDOM.render(appJsx, document.getElementById('root'))

The reason the components do not appear is because the Header is inside teh Switch it should be outside
function App() {
return (
<div className="wrapper">
<Header/>
<Router>
<Switch>
<Route exact path="/" component={ Home } />
<Route exact path="/products" component={ ProductIndex } />
</Switch>
</Router>
</div>
);
}
in addition you have a lot of issues in the code just look at the console...

How do I add a transition to my navbar menu in react when I click the toggle button

I have created an e-commerce base template in HTML and CSS / Bootstrap. I am trying to convert the template to React components for a NextJS site, but the toggle function was not initially working. I saw I can use React Hooks to toggle classes, which I have implemented using useState/isActive. The hamburger transition works but the transition for the actual menu does not.
Here is navbar.js
import Logo from '../images/logo-small-cropped.png'
import Image from 'next/image'
import React, { useState } from "react"
export default function Navbar({ }) {
const [isActive, setActive] = useState("false");
const handleToggle = () => {
setActive(!isActive);
};
return (
<nav className="navbar navbar-expand-md navbar-light border-top fixed-top border-bottom py-0" >
<div className="container-fluid text-center" >
<a className="navbar-brand" href="#">
<span className="mb-2">
<Image src={Logo} alt="Little Pink Boutique Logo" />
</span>
</a>
<button onClick={handleToggle} className="navbar-toggler navbar-toggler-button" type="button" aria-label="Toggle navigation">
<div id="hamburger" className={isActive ? "null" : "open"}>
<span></span>
<span></span>
<span></span>
</div>
</button>
<div className={isActive ? "collapse navbar-collapse" : "navbar-collapse"} >
<ul className="navbar-nav me-auto mb-2 mb-md-0">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="/home" > </a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Women</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Men</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Children</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Accessories</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">FAQs</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Contact</a>
</li>
</ul>
<form className="d-flex">
<input className="form-control me-2 mt-3 mb-2" type="search" placeholder="Search" aria-label="Search"/>
<button className="btn btn-outline-success mt-3 mb-2" type="submit">Search</button>
</form>
</div>
</div>
</nav>
)
}
The .collapse class is just the standard Bootstrap class, the navbar-collapse class is as follows.
.navbar-collapse{
background-color: rgb(238, 236, 236);
width: 100vw;
}
I'm not sure how to get the transition to work, or if this is the best way to do it.
Any help appreciated as always.

Try using the transition css property in the navbar-collapse class.
Something like this :-
.navbar-collapse{
transition: width 2s;
background-color: rgb(238, 236, 236);
width: 100vw;
}

React problem with AdminLTE3 sidebar treeview

So I want to make a React sidebar with an item 'Employee' that when clicked will expand three child items.
Here is the code
import React, { Component } from "react";
export default class Sidebar extends Component {
constructor(props) {
super(props);
this.state = {
user: {}
}
}
componentDidMount() {
let userData = JSON.parse(localStorage.getItem('user'))
this.setState({user: userData})
}
render() {
return (
<aside className="main-sidebar sidebar-dark-primary elevation-4" >
{/* Brand Logo */}
<a href="/" className="brand-link">
<span className="brand-text font-weight-light ml-1">HRMS</span>
</a>
{/* Sidebar */}
<div className="sidebar">
{/* Sidebar user panel (optional) */}
<div className="user-panel mt-3 pb-3 mb-3 d-flex">
<div className="image">
<img
src={process.env.PUBLIC_URL + '/dist/img/user2-160x160.jpg'}
className="img-circle elevation-2"
alt="User Image"
/>
</div>
<div className="info">
<a href="#" className="d-block">
{this.state.user.fullname}
</a>
</div>
</div>
{/* Sidebar Menu */}
<nav className="mt-2">
<ul
className="nav nav-pills nav-sidebar flex-column"
data-widget="treeview"
role="menu"
data-accordion="false"
>
{/* Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library */}
<li className="nav-item">
<a href="/" className="nav-link active">
<i className="nav-icon fas fa-tachometer-alt" />
<p>
Dashboard
<span className="right badge badge-success">Home</span>
</p>
</a>
</li>
<li className="nav-item">
<a href="pages/widgets.html" className="nav-link">
<i className="nav-icon fas fa-th" />
<p>
Widgets
<span className="right badge badge-danger">New</span>
</p>
</a>
</li>
<li className="nav-item has-treeview">
<a href="#" className="nav-link">
<i className="nav-icon fa fa-user" />
<p>
Employee
<i className="right fas fa-angle-left" />
</p>
</a>
<ul className="nav nav-treeview">
<li className="nav-item">
<a href="/employee-add" className="nav-link">
<i className="fa fa-user-plus nav-icon" />
<p>Add Employee</p>
</a>
</li>
<li className="nav-item">
<a href="/employee-list" className="nav-link">
<i className="fas fa-users nav-icon" />
<p>Employee List</p>
</a>
</li>
<li className="nav-item">
<a href="/employee-add" className="nav-link">
<i className="far fa-circle nav-icon" />
<p>Employee Award</p>
</a>
</li>
</ul>
</li>
The problem is after login redirects to this page and I click the Employee item, the href activates and just reloads the page (what href="#" usually does). However if i remove the <i></i> tag or the href the css gets all messed up.
I am using AdminLTE3 so here is the documentation: https://adminlte.io/docs/3.0/javascript/treeview.html

I found the answer as it is a problem to many people. The problem occurs when you redirect from another page (i.e login page)
Here is the link to the answer: https://github.com/ColorlibHQ/AdminLTE/issues/1570#issuecomment-615841382

Try This
index.html
add this code to the script after body tag
<script>
$(document).ready(function(){
$('.nav-item ').click(function(){
if($(this).hasClass('menu-open')){
$(this).removeClass("menu-open");
$(this).children().removeClass("active");
}else{
$(this).addClass("menu-open");
$(this).children().addClass("active");
}
$('.nav-item').children().removeClass('active').not(this);
$(this).children().addClass("active");
});
});
</script>