I'm trying to use the window-close icon in my react app. https://fontawesome.com/icons/window-close?style=regular
It's not showing up and the class list says: fa fa-undefined fa-2x so something must not be working right.
My component is pretty small so it's not a lot of code.
Details component:
import React from 'react';
import FontAwesome from 'react-fontawesome';
import { faWindowClose } from '#fortawesome/free-regular-svg-icons';
const Details = (props) => {
const className =
'col details-col' + (props.showDetails ? '' : ' d-none');
return (
<div className={className}>
<FontAwesome icon={faWindowClose} size={'2x'} />
<h3 className={'text-center title details-title'}>
Order Details
</h3>
<h4>{props.activeOrder.title}</h4>
</div>
);
};
export default Details;
Here is the full rendered HTML:
<span icon="[object Object]" aria-hidden="true" class="fa fa-undefined fa-2x"></span>
I guess I was importing the wrong fontawesome library. I removed import FontAwesome from 'react-fontawesome'; from my imports. I added import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'; to my imports after installing it and it worked beautifully!
As requested by brooksrelyt, I followed the excellent tutorial here: https://scotch.io/tutorials/using-font-awesome-5-with-react
Related
I am just started working with react js for couple of days it throws error like
src\App.js
Line 2:8: 'navbar' is defined but never used no-unused-vars.this error occurs while i am importing the navbar component into my app.js, i did install eslint package and update my npm version also,i really dontknow what to do .i would really appreciate if u guys provide solution
Below code is my app.js:
import React from 'react';
import navbar from"./components/navbar";
import './App.css';
function App() {
return (
<div className="App">
<navbar />
</div>
);
}
export default App;
below is my navbar.js code which i am trying to import in the app.js
import React, { Component } from 'react';
import{MenuItems} from "./MenuItems";
import "./navbar.css";
class navbar extends Component{
render(){
return(
<nav className="navbarItems">
<h1 className="navbar-logo">React<i className="fab fa-react"></i>
</h1>
<div className="menu-icon"></div>
<ul>
{MenuItems.map((items,index)=>{
return(
<li key={index}>
<a className={MenuItems.cname}href={items.url}>
{items.title}
</a></li>
)
})}
</ul>
</nav>
)
}
}
export default navbar;
I am newish to react and looking for ways to improve/simplify this component - any suggestions welcome. The below code works to render my error page. The strings live in a strings.json file.
ErrorPage.jsx
import React from 'react';
import {FormattedMessage} from 'react-intl';
import {FormattedHTMLMessage} from "react-intl";
import './ErrorPage.pcss';
function ErrorPage() {
return (
<div className="error-page">
<h1>
<FormattedMessage id="EEL_HEADER_FAIL"/>
</h1>
<p>
<FormattedHTMLMessage id="EEL_ERROR1_MESSAGE"/>
</p>
</div>
);
}
export default ErrorPage;
strings.json
{
"EEL_HEADER_FAIL": {
"default_message": "Whoopsie, that didn't work"
},
"EEL_ERROR1_MESSAGE": {
"default_message": "Try refreshing your page or visit our <a href='https://example.com'>help center</a>."
}
}
I have created a new component Navbar.jsx
import { Disclosure } from '#headlessui/react'
import Image from 'next/image'
import tacoPicture from '../public/lets-taco-bout-it.png'
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export const Header = () => {
return (
<Disclosure as="nav" className="bg-white shadow">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<div className="flex-shrink-0">
<Image src={tacoPicture} alt="Picture of the author" />
</div>
</div>
</div>
</div>
</>
)}
</Disclosure>
)
}
So, this needs to be described as a story. In my file Navbar.stories.jsx I do the following
import { Navbar } from './Navbar';
export default {
title: 'Example/Navbar',
component: Navbar,
};
const Template = (args) => <Navbar {...args} />;
export const Default = Template.bind({});
And get the error:
I am new to storybook, however it seems to be a react issue, which I am also new to.
Faced the same issue. What is the mistake I have done is using the wrong import.
So i change this,
import { Button } from './button';
Into this
import Button from './button';
I got the idea from #Katharina's answer. thanks...
Apparently, I was importing a Navbar, my component's name is Header. Also there is a difference between export default function () {} and export const x = () => {}, which is crucial for importing.
I was getting the same error. In my case, the problem wasn't in imports but in using styled-components' css attribute (using babel-plugin-styled-components).
<Button
variant={"color"}
// this caused it
css={`
margin-right: 24px;
`}
>
The workaround was to get rid of the css attribute by replacing the Button component with a new styled one. Like this:
const SubmitButton = styled(Button)`
margin-right: 24px;
`;
I got this error, I was working on an existing react library and making/editing things by hand. The solution was to find the index.ts in the src folder and add my new components to it manually.
Hope this helps someone
If you want to import your component using this syntax:
import { Button } from './button';
You can use named export from your button component
export { Button }
otherwise you have to import it without the curly braces like so:
import Button from './button';
you can read more about named vs default exports here:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
also this article has a nice explanation:
https://medium.com/#timoxley/named-exports-as-the-default-export-api-670b1b554f65
I recently added FontAwesomeReact to my React site. I'm using the icons in a Sidebar component that displays on every page.
Page:
import React from 'react'
import Header from '../components/header'
import Sidebar from '../components/sidebar'
import Layout from '../components/layout'
import Footer from '../components/footer'
class IndexPage extends React.Component {
render() {
return (
<Header />
<Sidebar />
<Layout>
<p>Hello there is some content here </p>
</Layout>
<Footer />
)
}
}
Sidebar component:
import React from 'react'
import Menucard from '../components/menucard'
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faInfoCircle, /*...*/, faCheck} from '#fortawesome/free-solid-svg-icons'
library.add(faInfoCircle,/*...*/,faCheck)
const clubAdminMenu = (
<div>
<h2>Club Admin</h2>
<ul>
<li className="pod">
<FontAwesomeIcon icon="user" pull="right" /> Manage Registrations
</li>
<li className="pod">
<a href="..."><FontAwesomeIcon ... /> ...<a>
</li>
...
</ul>
</div>
)
class Sidebar extends React.Component {
render() {
return (
<div className="Sidebar">
<Menucard content={clubAdminMenu} />
...
</div>
)
}
}
export default Sidebar
At first I assumed that <FontAwesomeIcon /> would be defined everywhere, since it's imported in <Sidebar /> and <Sidebar /> is on every page. Clearly I was wrong, the icons did not show up on any page unless I explicitly included import { FontAwesomeIcon } from '#fortawesome/react-fontawesome' on every single page.
But when I include that import on every page, the compiler warns me that 'FontAwesomeIcon' is defined but never used about a zillion times (once on every page that doesn't include <FontAwesomeIcon /> in its body, even if it is included in <Sidebar />) I get why it's saying this, but if I remove the import, the icons do not render in the sidebar on that page.
These two things seem to contradict each other. Am I missing something? Is there a better way to do this?
This is the official documentation for Font Awesome v5.15 https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react
It says that you need to include the below code in App.js (Not necessarily, but if you want to use font awesome icons in a lot of files, it is a good idea to make it Global)
import { library } from "#fortawesome/fontawesome-svg-core";
import { fab } from "#fortawesome/free-brands-svg-icons"; // To use branded icons such as Google, Github, etc.
import {
faCheckSquare,
faCoffee,
faInfoCircle,
// All other icons (except fab) that you want to use MUST be declared here
} from "#fortawesome/free-solid-svg-icons";
library.add(fab, faCheckSquare, faCoffee, faInfoCircle); // All icons imported must be added to the library
And then in every file where you want to use Font Awesome icons, you must include
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
And then to use the Font Awesome icons, you need to do the following:
<FontAwesomeIcon icon={[iconType, icon]} />
where iconType = 'fab', 'fas', etc.
and icon = 'github', 'coffee', etc.
<FontAwesomeIcon icon={['fab', 'google']} />
<FontAwesomeIcon icon={['fas', 'coffee']} />
When you import
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
You need to call
<FontAwesomeIcon />
The reason you get that message because you are just importing it but you never called it. So do as I suggested above
I want to display text in the form of react component inside react app.
When I tried to render it, it gives me not defined error, which is understandable.
import React from 'react';
import HeaderClass from './Header.css';
import logo from '../../Assets/Images/logo.jpg'
const Header = () => {
return(
<div className="header-wrapper">
<p className="logo__tagline"> <text /> </p>
<img className="App__logo" src={logo} alt="Name" />
</div>
)
};
export default Header;
Not sure exactly what you are trying to do?
But if i understand correct you could do like this:
In the text file:
import React, { Fragment } from 'react'; // So it doesn't create a unnecessary node element. **Only available in react 16+
export const Text = () => <Fragment>Your text here</Fragment>;
and then you can bring in the text element and use it in your code:
import React from 'react';
import HeaderClass from './Header.css';
import logo from '../../Assets/Images/logo.jpg'
import { Text } from './Text'
const Header = () => {
return(
<div className="header-wrapper">
<p className="logo__tagline"> <Text /> </p>
<img className="App__logo" src={logo} alt="Name" />
</div>
)
};
export default Header;
Maybe i have misunderstood the question but i don't know why you would want to do this.