We Keep Coding

How can i route my Home component from the code below without throwing uncaught TypeError in the console

I'm having troubles displaying the Home component. How can I get this to work?
console display Uncaught TypeError: Cannot read properties of undefined (reading 'string')
at ./node_modules/react-icon/lib/index.js
I'm using
my versions are:
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-icon": "^1.0.0",
"react-icons": "^4.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
And my codes are:
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
My codes are:
Navbar.js
import React from 'react'
import './NavbarStyles.css'
import Logo from '../assets/logo.png'
import {Link} from 'react-router-dom'
import {FaBars,} from 'react-icon'
const Navbar = () => {
return (
<header>
<nav className='navbar'>
<div className='logo'>
<Link to='/'><img src={Logo} alt='' /></Link>
</div>
<ul className='nav-menu'>
<li className='nav-item'>
<Link to='/' className='nav-link'>Home</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Services</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Events</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Contact</Link>
</li>
</ul>
<div className='hamburger'>
<FaBars />
</div>
</nav>
</header>
)
}
export default Navbar;
My codes are:
App.js
import React from 'react';
import {Routes, Route} from 'react-router-dom';
import Home from './components/Home';
function App() {
return (
<>
<Routes>
<Route path='/' element={<Home />} />
</Routes>
</>
);
}
export default App;
My codes are:
Home.js
import React from 'react'
import './HomeStyles.css'
import Navbar from './Navbar'
const Home = () => {
return (
<div>
<Navbar />
</div>
)
}
export default Home;

Issue
I think the issue is in the NavBar component. It is trying to import a named export from react-icon. react-icon doesn't export any specific icon components, instead it exports a single default export (i.e. import Icon from 'react-icon';) that uses props to specify which icon should be rendered. react-icon looks like an older/outdated package that fails to work with newer versions (React 15.5+) of React.
react-icon/src/index.js
const React = require('react');
const Icon = React.createClass({
displayName: 'Icon',
propTypes: {
glyph: React.PropTypes.string.isRequired, // <-- issue likely here
classPrefix: React.PropTypes.string,
children: React.PropTypes.node
},
statics: {
defaultFontPrefix: 'fa',
setDefaultFontPrefix(prefix) {
Icon.defaultFontPrefix = prefix;
}
},
render() {
const prefix = this.props.classPrefix || Icon.defaultFontPrefix;
let className = `${prefix} ${prefix}-${this.props.glyph}`;
if (this.props.className) {
className += ` ${this.props.className}`;
}
return (
<span {...this.props} className={className}>
{this.props.children}
</span>
);
}
});
module.exports = Icon;
React removed the PropTypes into its own package since React 15.5, so in the code above React.PropTypes is undefined and throws an error when trying to access the string property object.
Solution
Import the FaBars icon from react-icons instead of react-icon.
import React from 'react';
import './NavbarStyles.css';
import Logo from '../assets/logo.png';
import { Link } from 'react-router-dom';
import { FaBars } from 'react-icons'; // <-- import from `react-icons`
const Navbar = () => {
return (
<header>
<nav className='navbar'>
<div className='logo'>
<Link to='/'><img src={Logo} alt='' /></Link>
</div>
<ul className='nav-menu'>
<li className='nav-item'>
<Link to='/' className='nav-link'>Home</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Services</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Events</Link>
</li>
<li className='nav-item'>
<Link to='/' className='nav-link'>Contact</Link>
</li>
</ul>
<div className='hamburger'>
<FaBars />
</div>
</nav>
</header>
);
};
You'll probably want to also remove react-icon from your project since it's so outdated. As of today (13/06/2022) the repo hasn't had an update in 7 years! Uninstall it by running the following command from the project's root directory.
npm uninstall --save react-icon

import React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
try like this

Uncaught TypeError: this is undefined in Amplify UI in React

I installed Amplify Pagination to beautify my project, however, things got weird after I pasted code in my project, the console always shows
Uncaught TypeError: this is undefined
https://ui.docs.amplify.aws/components/pagination
I then created a default React project but the result remains the same.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { AmplifyProvider } from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css'; // default theme
ReactDOM.render(
<React.StrictMode>
<AmplifyProvider>
<App />
</AmplifyProvider>
</React.StrictMode>,
document.getElementById('root')
);
import { Pagination } from '#aws-amplify/ui-react';
import '#aws-amplify/ui-react/styles.css';
function App() {
return (
<div className="App">
<Pagination
currentPage={1}
totalPages={10}
siblingCount={1}
onChange={()=>this.onChange()}
onNext={()=>this.onNext()}
onPrevious={()=>this.onPrevious()}
/>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

"this" is undefined because you are not in a class component
function App() {
const onChange = () => { do something }
const onNext = () => { do something }
const onPrevious = () => { do something }
return (
<div className="App">
<Pagination
currentPage={1}
totalPages={10}
siblingCount={1}
onChange={onChange}
onNext={onNext}
onPrevious={onPrevious}
/>
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;

how can i use Route without getting any errors like this

Guys i'm trying to work on my navigation bar and use route but it always shows errors
I don't know the reason but it isn't convinced with the routes at all and the error is
"index.tsx:19 Uncaught Error: useRoutes() may be used only in the context of a <Router>
component.
at invariant (index.tsx:19)
at useRoutes (index.tsx:637)
at Routes (index.tsx:339)
at renderWithHooks (react-dom.development.js:14985)
at mountIndeterminateComponent (react-dom.development.js:17811)
at beginWork (react-dom.development.js:19049)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
"
below is my app.jsx code
import React, { Component } from 'react';
import Home from './home';
import {Route,Routes} from "react-router-dom"
class App extends React.Component {
render() {
return (
<React.Fragment>
<Routes>
<Route path="/home" element={<Home />} />
</Routes>
</React.Fragment>
);
}
}
export default App;
and my navigation is this code as well
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import"./home.css";
const Home = () => {
return (
<React.Fragment>
<nav className="navbar navbar-expand-lg ">
<div className="container-fluid">
<i className="fas fa-paw fa-2x"></i>
<a className="navbar-brand " href="#" >Pets Forever</a>
<div className="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
{console.log("shit")}
<a className="nav-link" href="/home">Home <span className="sr-only">
(current)</span></a>
{console.log("shit2")}
</li>
<li className="nav-item">
<a className="nav-link" href="#">Shop</a>
{console.log("shit3")}
</li>
<li className="nav-item">
<a className="nav-link" href="#">Contact Us</a>
{console.log("shit4")}
</li>
<li className="nav-item">
<a className="nav-link" href="#">Login</a>
{console.log("shit5")}
</li>
<li className="nav-item">
<a className="nav-link" href="#">Sign Up</a>
{console.log("shit6 ")}
</li>
</ul>
</div>
</div>
</nav>
</React.Fragment>
);
}
export default Home;
though i was working navlink and yet it didn't work and showed some weird error but i need to work this route first please

Your implementation seems to be incomplete. You're missing BrowserRouter. Also, look at this response - it shows well how to use useRoutes.
import React, { Component } from 'react';
import Home from './home';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
class App extends React.Component {
render() {
return (
<React.Fragment>
<Router>
<Routes>
<Route path="/home" element={<Home />} />
</Routes>
</Router>
</React.Fragment>
);
}
}
export default App;

React - how to add jquery script with Materialize's function

Hello I'd like to add jquery to a react app, but I don't know how to do it. I use materialize to build a navbar and I want to use .sidenav function from their lib.
I installed jquery
npm install jquery
and add
import $ from "jquery";
to ./app.js, then in Navbar.js i got /
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<>
<nav className="nav-wraper">
<div className="container">
<a Link to="/" className="brand-logo">
Blog
</a>
<a Link to="/" className="sidenav-trigger" data-target="mobile-links">
<i className="material-icons">menu</i>
</a>
<ul className="right hide-on-med-and-down">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/create">New Blog</Link>
</li>
<li>
<Link to="/signup">Sign up</Link>
</li>
</ul>
</div>
</nav>
<ul className="sidenav" id="mobile-links">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/create">New Blog</Link>
</li>
<li>
<Link to="/signup">Sign up</Link>
</li>
</ul>
</>
);
};
export default Navbar;
Where am I supposed to put this code?:
$(document).ready(function () {
$(".sidenav").sidenav();
});

In a way, you don't need to use $(document).ready statement. instead of that, you can use useEffect with an empty deps array ([]) in functional components or componentDidMount in class components. see the below example:
(Remember to use Materilized-css CDNs in index.html).
In functional component (As you are):
import React, { useEffect, useRef } from "react";
import { Link } from "react-router-dom";
import M from 'materialize-css';
const Navbar = () => {
const myNavbar = useRef('');
useEffect(() => {
M.Sidenav.init(myNavbar);
}, []);
return (
<>
<nav className="nav-wraper" ref={myNavbar}>...</ul>
</>
);
};
export default Navbar;
For more information about useEffect and useRef statements, i would like to refer you to the official documentation

Trying to toggle/render between components in React

I want to toggle between components for the "body" of my app.
trying to make an app of my website.
i have tried many ways (except react-router, or Gatsby) and failed miserably. I am at a point where do not get error message, but nothing other than my state renders.
I want to toggle the "body" from the header button, having the router.js handle/render the different components.
app.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import Header from './Components/header.js';
import Router from './Components/router.js';
import Footer from './Components/footer.js';
class App extends React.Component {
render() {
return (
<div className="App">
<Header />
<Router />
<Footer />
</div>
);
}
}
export default App;
router.js
import React from 'react';
import Header, { onClick } from './header.js';
import Main from './main.js';
import About from './about.js';
class Router extends React.Component {
constructor(props) {
super(props);
this.state = { page: <Main /> };
this.changePage = this.changePage.bind(this);
}
changePage(newPage) {
this.setState({
page: newPage
});
}
render() {
return (
<section className="Router">
<div>{this.state.page} <a onClick={this.changePage}></a></div>
</section>
);
}
}
export default Router;
header.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
class Header extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const page = e.target.value;
return ({ page: (e) });
}
render() {
return(
<div className="Header">
<nav className="navbar navbar-expand-lg navbar-light" style={{backgroundColor: '#504C5E', color: '#A89B34'}}>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon color-black"></span>
</button>
<div className="col-12 collapse navbar-collapse my-2" id="navbarSupportedContent">
<ul className="navbar-nav col-10">
<li className="nav-item active col-2">
<button onClick={this.handleChange} value="main">Home<span className="sr-only">(current)</span></button>
</li>
<li className="nav-item col-2">
<button onClick={this.handleChange} value="<About />">About Me</button>
</li>
<li className="nav-item col-2">
<button>Education</button>
</li>
<li className="nav-item col-2">
<button>Experience</button>
</li>
<li className="nav-item col-2">
<button>Projects</button>
</li>
</ul>
</div>
</nav>
</div>
);
}
}
export default Header;