We Keep Coding

Next.js Navbar gives a warning of Target Element not found when clicked

I am currently working on a next.js app, which contains a connect wallet button found to the right of the navbar, with the navigation links to the left of the navbar.
This is what it looks like currently
This is the code for the NavBar.jsx react page
import React, { useState } from 'react';
import { Link , animateScroll as scroll, scroller} from 'react-scroll'
import { MenuIcon, XIcon } from '#heroicons/react/outline';
import { navLinks } from '../pages/data';
const Navbar = ({ initHashconnect }) => {
const [nav, setNav] = useState(false)
const handleClick = () => setNav(!nav)
const handleClose = () => setNav(!nav)
return (
<div className='navbar navbar-expand-lg shadow-md py-2 bg-white relative flex items-center w-full justify-between'>
<div className='px-2 flex justify-between items-center w-full h-full'>
<div className='flex items-center'>
<h1 className='text-3xl font-bold mr-4 sm:text-4xl'>P2A</h1>
<nav>
<ul className='hidden md:flex'>
<li><Link to="/home" activeClass="active" spy={true} smooth={true} duration={500}>Home</Link></li>
<li><Link to="/solutions" activeClass="active" spy={true} smooth={true} offset={-200} duration={500}>Solutions</Link></li>
<li><Link to="/projects" activeClass="active" spy={true} smooth={true} offset={-50} duration={500}>Projects</Link></li>
<li><Link to="about" activeClass="active" spy={true} smooth={true} offset={-100} duration={500}>About us</Link></li>
</ul>
</nav>
</div>
<div className='hidden md:flex pr-4'>
<button className='px-8 py-3' onClick={initHashconnect}>Connect Wallet</button>
</div>
<div className='md:hidden mr-4' onClick={handleClick}>
{!nav ? <MenuIcon className='w-5' /> : <XIcon className='w-5' />}
</div>
</div>
<ul className={!nav ? 'hidden' : 'absolute bg-zinc-200 w-full px-8'}>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="home" smooth={true} duration={500}>Home</Link></li>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="solutions" smooth={true} offset={-200} duration={500}>About</Link></li>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="projects" smooth={true} offset={-50} duration={500}>Support</Link></li>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="about" smooth={true} offset={-100} duration={500}>Platforms</Link></li>
<li className='border-b-2 border-zinc-300 w-full'><Link onClick={handleClose} to="pricing" smooth={true} offset={-50} duration={500}>Pricing</Link></li>
<div className='flex flex-col my-4'>
<button className='bg-transparent text-indigo-600 px-8 py-3 mb-4'>Connect Wallet</button>
<button className='px-8 py-3'>Submit A project</button>
</div>
</ul>
</div>
);
};
export default Navbar;
This is the Layout.jsx react page where the Navbar component is exported to
import Navbar from './Navbar';
import { initHashconnect } from '../utils/hashconnectService';
export default function Layout({ children }) {
return (
<>
<Navbar initHashconnect={initHashconnect} />
<main>{children}</main>
</>
)
}
This is the _app.js page where the Layout component is exported to and displayed on the live server
import Layout from '../components/layout'
import '../styles/globals.css'
import Link from 'next/link'
function MyApp({ Component, pageProps }) {
return(
<Layout>
<Component {...pageProps}/>
</Layout>
)
}
export default MyApp
However, whenever I try to click on any of the nav buttons on the dev server, I get this error that pops up.
I am not sure why this is happening, as the links should be directing the users to the respective pages

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 });

Cache Image in react.js then image not appearing

I was planning to upload my React.js website into GitHub. then I enter npm cache clean --force into the terminal and then now all my image is in cache image. none of my images is loading up but the other information and animation are still working. how do I fix this problem? thanks
the images is under className='navbar-container container location.
import React, { useState, useEffect } from 'react'
import {Link} from 'react-router-dom'
import {FaBars, FaTimes} from 'react-icons/fa'
import { Button } from './Button'
import './Navbar.css'
import {IconContext} from 'react-icons/lib'
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 (
<>
<IconContext.Provider value ={{color: "#fff"}}>
<nav className='navbar'>
<div className='navbar-container container'>
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
<img src="/images/UOWMKDU-logb.png"
alt="UOWKDU Logo" width="35%" height="85%" className='navbar-icon' />
</Link>
<div className='menu-icon' onClick={handleClick}>
{click ? <FaTimes /> : <FaBars />}
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li className='nav-item'>
<Link
to='/service'
className='nav-links'
onClick={closeMobileMenu}
>
Services
</Link>
</li>
<li className='nav-btn'>
{button ? (
<Link to='/sign-up' className='btn-link'>
<Button buttonStyle='btn--outline' >SIGN UP</Button>
</Link>
) : (
<Link to='/sign-up' className='btn-link' onClick={closeMobileMenu}>
<Button
buttonStyle='btn--outline'
buttonSize='btn--mobile'
>
SIGN UP
</Button>
</Link>
)}
</li>
</ul>
</div>
</nav>
</IconContext.Provider>
</>
)
}
export default Navbar

Fixed:
I recreate an new react.js folder and copy and paste the old one to the new one. because of packages.json have some issues. i think it might be some packages missing. but after make a new react.js file and copy and paste back. everything is fine

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.