We Keep Coding

Cannot get navbar to function on collapse using react-bootstrap

I'm using react-bootstrap to create a responsive navbar and for some reason it will not work. I've tried using react-router-dom to handle page change and creating a function withing the navbar to handle page change to see if that was the issue. The hamburger icon is not even rendering just a gray blank square.
This is my current code
And here is what it renders
What else can I try?
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar'
import '../css/Navbar.css'
export default function NavbarRender({ currentPage, handlePageChange }){
return(
<Navbar collapseOnSelect expand='sm' id='total-nav'>
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#about" onClick={() => handlePageChange('About')}
className={currentPage === 'About' ? 'nav-link active' : 'nav-link'} id="navbar">
About
</Nav.Link>
<Nav.Link href="#portfolio" onClick={() => handlePageChange('Portfolio')}
className={currentPage === 'Portfolio' ? 'nav-link active' : 'nav-link'} id="navbar">
Portfolio
</Nav.Link>
<Nav.Link href="#resume" onClick={() => handlePageChange('Resume')}
className={currentPage === 'Resume' ? 'nav-link active' : 'nav-link'} id="navbar">
Resume
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}

I have that problem when forget to import react-boostrap CSS
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';

How to scroll and close the menu in React

I am using library(react-scroll) for scrolling on click in designing a website in react. when i open the website on mobile devices the menu bar should open and when i click on one of the item it should scroll and close that menu automatically.scroll was working fine in all devices but the menu was not closing.
navbar.js:
import React, {useEffect, useState} from 'react'
import { FaBars, FaTimes } from 'react-icons/fa'
import './Navbar.css'
import { Button } from '../components/Button/Button'
import { Link } from 'react-scroll'
const Navbar = () => {
const [click, setClick] = useState(false);
const [button, setButton] = useState(true);
const handleClick =() => setClick(!click);
const closeMobileMenu = () => setClick(false)
const showButton = () =>{
if(window.innerWidth <= 960){
setButton(false)
}else {
setButton(true)
}
}
useEffect(() =>{
showButton();
},[]);
window.addEventListener('resize', showButton);
return (
<div className="navbar">
<div className='navbar-container cointainer'>
<Link to='/' className="navbar-logo" onClick={closeMobileMenu}>
<img src='/images/Gns-logo.png' className='navbar-icon'></img>
</Link>
<div className='menu-icon' onClick={handleClick}>
{click ? <FaTimes id='menu-close-icon' />:<FaBars/>}
</div>
<ul className={click ? 'nav-menu-active' : 'nav-menu'}>
<li className='nav-item nav-features' >
<Link to='section-features' className='nav-links'>
Features
</Link>
</li><li className='nav-item'>
<Link to='section-plans' className='nav-links'>
Pricing
</Link>
</li>
<li className='nav-item'>
<a className='nav-links' target="_blank" href="https://gns.com/about-us/">About Us</a>
</li><li className='nav-item'>
<a className='nav-links' target="_blank" href="https://gns.com/contact-us/">Contact Us</a>
</li>
<li className='nav-btn'>
{button ? (
<Link to='section-plans' spy={true} smooth={true} offset={50} duration={500} className='btn-link'>
<Button buttonStyle='btn--outline'>Try Now</Button>
</Link>
):(
<Link to='section-plans' spy={true} smooth={true} offset={50} duration={500} className='btn-link'>
<button className="button-try">Try Now</button>
</Link>
)}
</li>
</ul>
</div>
</div>
)
}
export default Navbar
Thanks.

Having An Issue With Fontawesome icons returning as boxes

So, Im trying to set up a hamburger menu setup where the icons appears when I shrink my browser down to a mobile size, and when the hamburger icon is clicked, its replaced with an X icon until I click it again to close the mobile menu. My issue is that even with the CDN appropriately placed in my index.html file, my icons are appearing as boxes. I've tried importing the library to my navbar page in a variety of different ways, but haven't been able to find out what exactly Ive done wrong. I did manage to get the faMonsterTruck icon to load, but how I got this icon to work is not working in my click event. My code for my navbar.js page looks as such:
import React, { useState, useEffect } from "react";
import "./navbar.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { Link } from "react-router-dom";
import { faTruckMonster } from "#fortawesome/free-solid-svg-icons";
function Navbar() {
const [click, setClick] = useState(false);
const [button, setButton] = useState(true);
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);
const showButton = () => {
if (window.innerWidth <= 960) {
setButton(false);
} else {
setButton(true);
}
};
useEffect(() => {
showButton();
}, []);
window.addEventListener("resize", showButton);
return (
<div>
<nav className="navbar">
<div className="navbar-container">
<Link to="/" className="navbar-logo" onClick={closeMobileMenu}>
EPC
<FontAwesomeIcon icon={faTruckMonster} />
</Link>
<div className="menu-icon" onClick={handleClick}>
<i className={click ? "fas fa-times" : "fas fa-bars"} />
</div>
<ul className={click ? "nav-menu active" : "nav-menu"}>
<li className="nav-item">
<Link to="/" className="nav-links" onClick={closeMobileMenu}>
Home
</Link>
</li>
<li>
<Link to="/zero" className="nav-links" onClick={closeMobileMenu}>
Year 0
</Link>
</li>
<li className="nav-item">
<Link to="/one" className="nav-links" onClick={closeMobileMenu}>
Year 1
</Link>
</li>
<li className="nav-item">
<Link to="/two" className="nav-links" onClick={closeMobileMenu}>
Year 2
</Link>
</li>
<li className="nav-item">
<Link to="/three" className="nav-links" onClick={closeMobileMenu}>
Year 3
</Link>
</li>
<li className="nav-item">
<Link to="/four" className="nav-links" onClick={closeMobileMenu}>
Year 4
</Link>
</li>
</ul>
</div>
</nav>
</div>
);
}
export default Navbar;
In case it's difficult to locate where I need help exactly, the click event code I referenced is this snippet here:
<div className="menu-icon" onClick={handleClick}>
<i className={click ? "fas fa-times" : "fas fa-bars"} />
</div>
<ul className={click ? "nav-menu active" : "nav-menu"}>
<li className="nav-item">
I know that I have some useless code in there for button calls. Im cleaning up the page as I go, as my plans for how I want my page to appear have changed a couple times.

React: Multi step form/wizard TypeError: action is not a function

it is my first time using React/doing frontend development in general, and I have gotten stuck on trying to create a multi step form/wizard for my web app. I took reference from this react hook form tutorial on making a multi step form with validation, however, a typeerror has been constantly thrown whenever I tried to submit each step of the form and push to the next step. I must be missing something extremely basic.
My structure is as follows.
I created my global store in the App.js component, and wrapped the contents of my App.js with a statemachineprovider as follows
App.js
function Main() {
return (
<StateMachineProvider>
<DevTool/>
<MemoryRouter>
<MainNavbar></MainNavbar>
<div style={{
height: "100vh",
backgroundSize: 'contain',
backgroundPosition: 'top center',
backgroundRepeat: 'no-repeat',
backgroundImage: `url("https://www.smartnation.gov.sg/images/default-source/module/home-base-item/cb0c06c1-cfc1-48a9-84ae-7909e93cf716.jpg" )`
}}>
<div className="content">
<Route exact path="/" component={Home}/>
<Route path="/stuff" component={Stuff}/>
<Route path="/contact" component={Contact}/>
<Route path="/step1" component={Step1}/>
<Route path="/step2" component={Step2}/>
<Route path="/result" component={Result}/>
</div>
</div>
</MemoryRouter>
</StateMachineProvider>
);
}
My Contact.js looks like this
import React, {Component} from "react";
import ReactDOM from "react-dom";
import {
MemoryRouter,
Route,
Link,
useLocation
} from "react-router-dom";
import Step1 from "./Step1";
import Step2 from "./Step2";
import Result from "./Result";
const Contact = () => {
const location = useLocation();
return (
<>
<div>
<nav className="container" aria-label="form-navigation">
<ul className="pagination">
<li className={location.pathname === "/contact" ? "page-item disabled" : "page-item"}>
<a className="page-link"> <Link to="/step1">Previous</Link></a>
</li>
<li className={location.pathname === "/step1" ? "page-item active" : "page-item"}>
<a className="page-link"> <Link to="/step1">1</Link></a>
</li>
<li className={location.pathname === "/step2" ? "page-item active" : "page-item"}>
<a className="page-link"> <Link to="/step2">2</Link></a>
</li>
<li className={location.pathname === "/result" ? "page-item active" : "page-item"}>
<a className="page-link"> <Link to="/result">3</Link></a>
</li>
<li className="page-item">
<a className="page-link" >Next</a>
</li>
</ul>
</nav>
</div>
</>
);
}
export default Contact;import React, {Component} from "react";
import ReactDOM from "react-dom";
import {
MemoryRouter,
Route,
Link,
useLocation
} from "react-router-dom";
import Step1 from "./Step1";
import Step2 from "./Step2";
import Result from "./Result";
const Contact = () => {
const location = useLocation();
return (
<>
<div>
<nav className="container" aria-label="form-navigation">
<ul className="pagination">
<li className={location.pathname === "/contact" ? "page-item disabled" : "page-item"}>
<a className="page-link"> <Link to="/step1">Previous</Link></a>
</li>
<li className={location.pathname === "/step1" ? "page-item active" : "page-item"}>
<a className="page-link"> <Link to="/step1">1</Link></a>
</li>
<li className={location.pathname === "/step2" ? "page-item active" : "page-item"}>
<a className="page-link"> <Link to="/step2">2</Link></a>
</li>
<li className={location.pathname === "/result" ? "page-item active" : "page-item"}>
<a className="page-link"> <Link to="/result">3</Link></a>
</li>
<li className="page-item">
<a className="page-link" >Next</a>
</li>
</ul>
</nav>
</div>
</>
);
}
export default Contact;
and the rest of the code (Step1, Step2, updateAction etc)is exactly the same as the code used in the tutorial mentioned. It is also found here in codesandbox.
I will appreciate it if someone can just explain my error in thinking as I am really new to state management in general!

This is due to the LSM major version update. https://github.com/bluebill1049/little-state-machine/releases/tag/v4.0.0-rc.2
all you have to change is in the useStateMachine usage.
- const { state, action } = useStateMachine(updateAction);
+ const { state, actions } = useStateMachine({ updateAction });

React <Link> Button is not showering text that i declare

Currently, I facing issues that I code a word to display on my HTML webpage, but it's not showing.
but if I use inspect on my web browser and manually enter "sign up" its is able to appear on the homepage
import React, { useState } from 'react'
import {Link} from 'react-router-dom'
import {MdFingerprint} from 'react-icons/md'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'
function Navbar() {
const [click,setClick]= useState(false);
const [button,setButton]= useState(true)
const handleClick = () => setClick(!click);
//const closeMobileMenu = () => setClick(false)
const showButton = () => {
if (window.innerWidth <= 960){
setButton(false)
} else {
setButton(true)
}
}
window.addEventListener('resize',showButton);
return (
<>
<div className="navbar">
<div className="navbar-container container">
<Link to='/Navbar1' className="navbar-logo">
<MdFingerprint className = "navbar-icon" />
UOW
</Link>
<div className="menu-icon" onClick={handleClick}>
{click ? <FaTimes/> : <FaBars/>}
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className="nav-item">
<li className="nav-item">
<Link to='/' className="nav-links">
Home
</Link>
</li>
<li className="nav-item">
<Link to='/staff' className="nav-links">
Staff list
</Link>
</li>
<li className="nav-btn">
{button?(
<Link to="/sign-up" className='btn-link'>
<Button buttonStyle='btn--outline'> SIGNUP </Button>
</Link>
):(
<Link to="/sign-up" className='btn-link'>
<Button buttonStyle="btn--outline" buttonSize='btn--mobile'> SIGNUP </Button>
</Link>
)}
</li>
</li>
</ul>
</div>
</div>
</>
)
}
export default Navbar
As you can see I am able to make a button but the problem is that the text does not display on the button even in the google chrome inspect mode. I am unable to see the word "SIGNUP" in it
the result :
the word "sign up" does not shower in the button
Below here are my Button.js code
import React from 'react'
import './Button.css';
const STYLES= ['btn--primary', 'btn--outline']
const SIZES = ['btn--medium', 'btn--large', 'btn--mobile', 'btn--wide']
const COLOR = ['primary', 'blue', 'red', 'white']
export const Button = ({lecturer, type, onClick, buttonStyle, buttonSize,buttonColor}) =>{
const checkButtonStyle=STYLES.includes(buttonStyle)? buttonStyle :STYLES[0]
const checkButtonSize=STYLES.includes(buttonSize)? buttonSize :SIZES[0]
const checkButtonColor=STYLES.includes(buttonColor)? buttonColor :COLOR[0]
return (
<button className={`btn ${checkButtonStyle} ${checkButtonSize} ${checkButtonColor} ` } onClick={onClick} type={type}>{lecturer}</button>
)
}

Well, you accepting your inner button text as a prop name as lecturer, so according to your <Button> component you need to pass its string to it like this:
<Link to="/sign-up" className='btn-link'>
<Button buttonStyle='btn--outline' lecturer='SIGNUP'></Button>
</Link>
NOTE: You can read more about props and components here.