I seem to be having an issue displaying the fontawesome icon in my browser. It does show in inspect, but not on my website itself.
Does anyone know how to resolve this issue?
import React, { Fragment, useState} from "react";
import { NavLink } from "react-router-dom";
import "../styles/common/Navbar.css";
const Navbar = () => {
const [showMenu, setShowMenu] = useState(false);
return (
<Fragment>
<nav>
<a href="/">
<h1>AnRa<span>Caribbean</span></h1>
</a>
<div className={showMenu ? "menu mobile-menu" : "menu"}>
<ul>
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink to="/PropertiesForSale">Buy a Property</NavLink></li>
<li><NavLink to="/PropertiesForRent">Rent a Property</NavLink></li>
<li><NavLink to="/About">About</NavLink></li>
<li><NavLink to="/Contact">Contact</NavLink></li>
</ul>
<button className="btn">
<NavLink to="#">Add Property</NavLink>
</button>
</div>
<i className="fa fa-solid fa-bars" onClick={() => setShowMenu(!showMenu)}></i>
</nav>
</Fragment>
);
}
export default Navbar;
Web view
How I have it in css from max-width screen.
.fa-bars{
display: flex;
color: gold;
}
Thank you in advance
downloaded
npm i --save #fortawesome/fontawesome-svg-core
npm install --save #fortawesome/free-solid-svg-icons
Still nothing.
tried deleting nodemodules.
restarted the application.
Nothing seems to work.
Based on Font Awesome docs, it should be used like the following:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
const App = () => {
return (<div><FontAwesomeIcon icon={faCoffee} /></div>)
}
export default App
Did you follow all the steps from the documentation?
The third step is to add the FontAwesomeIcon component and use it the following way:
<FontAwesomeIcon icon={faBars} />
Check the docs about how to use icons
PS: do not forget to import the component and the icon:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faBars } from '#fortawesome/free-solid-svg-icons';
Related
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
I'm trying to create a route for my page, I used REACT + TAILWIND bootstrap with vite.So I tried creating a link in my navigation file that would route to other pages, but nothing is displaying. No error is displaying in my terminal but there is a lot of error in my browser console. I don't know what I am doing wrong. here is what my console says.
Navigation.jsx
import { Link } from 'react-router-dom'
import * as ROUTES from '../../constants/routes'
const Navigation = () => {
return (
<div>
<ul>
<li>
<Link to={ROUTES.SIGN_IN}>Sign In</Link>
</li>
<li>
<Link to={ROUTES.LANDING}>Landing</Link>
</li>
<li>
<Link t0={ROUTES.HOME}>Home</Link>
</li>
<li>
<Link to={ROUTES.ACCOUNT}>Account</Link>
</li>
<li>
<Link to={ROUTES.ADMIN}>Admin</Link>
</li>
</ul>
</div>
)
}
export default Navigation
Main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
App.jsx
import React, { useState } from 'react'
import { Router, Routes } from 'react-router-dom'
import Navigation from './components/Navigation/Navigation'
function App() {
const [count, setCount] = useState(0)
return (
<Router>
<div className="App">
<Routes>
<Navigation/>
</Routes>
</div>
</Router>
)
}
export default App
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
Given these two components:
import Link from '#material-ui/core/Link';
import { Link } from 'react-router-dom';
Is there a way to get the style from Material-UI with the functionality of react-router-dom?
You can use the component prop of Material-UI's Link to integrate with Link in react-router-dom. You can do the same thing with Material-UI's Button.
Here's an example showing both:
import React from "react";
import { Route } from "react-router";
import { BrowserRouter as Router, Link as RouterLink } from "react-router-dom";
import Link from "#material-ui/core/Link";
import Button from "#material-ui/core/Button";
export default function LinkRouter() {
return (
<Router>
<div>
<Link component={RouterLink} to="/">
Link to Home
</Link>
<br />
<Link component={RouterLink} to="/inner">
Link to inner page
</Link>
<br />
<Button
variant="contained"
color="primary"
component={RouterLink}
to="/inner"
>
Button to inner page
</Button>
<Route path="/" exact>
<div>Here's Home</div>
</Route>
<Route path="/inner">
<div>Here's the inner page</div>
</Route>
</div>
</Router>
);
}
Documentation: https://material-ui.com/guides/composition/#link
I have created a wrapper component to merge both Link so it is not necessary to add the component prop every time.
import { LinkProps, Link as MuiLink } from "#mui/material";
import { Link as ReactRouterLink } from "react-router-dom";
import React, { FC } from "react";
const Link: FC<LinkProps> = props => {
return (
<MuiLink {...props} component={ReactRouterLink} to={props.href ?? "#"} />
);
};
export default Link;
And you can use is as you would use the MUI/LINK:
import Link from './components/Link';
<Link href="path_to_link">LINK</Link>
As the title says, I followed the installation steps as per the Bootstrap and React-Bootstrap docs after using create-react-app:
npm install --save react-bootstrap bootstrap#4.0.0-alpha.6
Then included a link to the bootstrap CDN in index.html just in case:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
Here is the very beginning of my react app which does not apply the styles properly:
MyNavbar.jsx:
import React, { Component } from 'react';
import {Navbar} from 'react-bootstrap';
import {Nav} from 'react-bootstrap';
import {NavItem} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
class MyNavbar extends Component {
render() {
return(
<div>
<Navbar>
<Navbar.Header>
<Navbar.Brand>
grood
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={2} href="#"> For Eateries </NavItem>
</Nav>
</Navbar>
</div>
)
}
}
export default MyNavbar;
App.js:
import React, { Component } from 'react';
import MyNavbar from './MyNavbar.jsx'
import 'bootstrap/dist/css/bootstrap.css';
class App extends Component {
render() {
return (
<div className="App">
<MyNavbar />
</div>
);
}
}
export default App;
Both MyNavbar and App are in the same src file
react-bootstrap is build for Bootstrap 3 - not 4.
Install package bootstrap 3 into your project and import css from there.
There is a project for React & Bootstrap 4 though: reactstrap.