This question confused me a long time,in my own project every time I want to use Icon of antd,it doesn't work.I don't know what's wrong,who knows please tell me,I am greatly appreciated.
I find the problem,so foolish am I.I don't import the style,just add "import 'antd/dist/antd.css'; ".It's OK now,hoping this can help others new to antd like me.
#Tian, I was stumped by that as well. Your solution is exactly what worked for me. Here's some code that worked for me:
import React from 'react';
import Icon from 'antd/lib/icon';
import 'antd/dist/antd.css';
class Header extends React.Component {
render() {
return (
<div className='Header'>
<span className='Header__title'>Happen</span>
<a className='Icon' href='#' id='bangButton'>
<Icon type='exclamation-circle-o'/>
</a>
<a className='Icon' href='#' id='plusButton'>
<Icon type='plus-circle-o'/>
</a>
</div>
);
}
}
export default Header;
This problem arises due to the missing css file that is required to antd component
Either add statement import 'antd/dist/antd.css'; or create your own less file and import it.
Related
i am trying to make my first project on React, but i am facing some issues with it. My imported react-router-dom libraries are not being used on LINK.
I do get an error: 'Link' is declared but its value is never read. Thank you in advance!
import React, {useState} from 'react';
import { Link } from 'react-router-dom';
function Navbar() {
return (
<>
<nav className="navbar">
<div className="navbar-container">
<LINK to="/" className="navbar-logo">
//TRVL <i className='fab fa-typo3'/>
</LINK>
</div>
</nav>
</>
)
}
export default Navbar
The error occurs because you are declaring Link in the import statement and then trying to use LINK in code. Link != LINK, the case should match.
My biggest problem is that I have not been able to get my react app to display since the first week of the course's assignment. I am at the end of the second week, and have been dealing with this second assignment for several weeks since the course is online through coursera.org.
I have gone over the assignment from week one and watched the videos over and over again, and made many revisions after googling a lot of the answers to the correct code. I have also gone through the resources of week one that the course offers.
I posted numerous times on week one's discussion board and follow the suggestions given. I still was not able to get the react app to display, so I moved one the week 2 assignment, and continued working on it.
After more than two weeks of a lot of trial and error and following the error prompts from the visual studio which is the one I am using for this course, I finally started to get some input on what errors I needed to fix on the editor through the cmd window. Every time I make corrections and run yarn start again, the app started to let me know what I needed to fix on the code. The following image is the last error that I got. Any suggestions are greatly appreciated.
This is the code of the functional component that is giving me the error.
import React from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, Breadcrumb, BreadcrumbItem } from 'reactstrap';
import {Link } from 'react-router-dom';
import { DishDetail } from 'reactstrap';
import { Menu } from 'reactstrap';
function RenderMenuItem ({dish, onClick}) {
return(
<card>
<Link to={`/menu/${dish.id}`} >
<cardImg width = "100%" src ={dish.image} alt={dish.name} />
<cardImgOverlay>
<cardTitle>
{dish.name}
</cardTitle>
</cardImgOverlay>
</Link>
</card>
);
}
function Millie (props) {
const menu = props.dishes.map((dish)=>{
return(
<div key={dish.id} className="col-12 col-md-5 m-1">
<RenderMenuItem dish={dish} />
</div>
);
});
}
return(
<div className="container">
<div className="row">
<Breadcrumb>
<BreadcrumbItem><Link to="/home">Home</Link></BreadcrumbItem>
<BreadcrumbItem active>Menu</BreadcrumbItem>
</Breadcrumb>
<div className="col-12">
<h3>Menu</h3>
<hr />
</div>
</div>
<div className="row">
{menu}
</div>
</div>
);
export default function Menu(){
}
Almost all if code has been provided by professor.
Error page from React App
Any suggestions are greatly appreciated!
ty
Mildred
As the error says, you're trying to declare something called "Menu" when something called "Menu" already exists.
import { Menu } from 'reactstrap';
export default function Menu(){
}
Either rename the Menu function component or rename the imported one:
// either rename this on import
import { Menu as ReactStrapMenu } from 'reactstrap';
// or call your Menu component something else
export default function MyMenu () {
}
As Chris points out in the comment below, it seems likely that you don't intend to export the empty Menu function at the bottom at all, and perhaps meant to export your Millie component? In that case, just replace the default export at the end with:
export default Millie;
Or export it in the same place you're defining it:
export default function Millie (props) {
const menu = props.dishes.map((dish)=>{
// etc.
}
Mildred! Nice that you're practicing, courses are awesome to learn the basics.
As described in the error you provided, "Menu" is declared twice. If you check the code snippet, you can see that you imported "Menu" from a library, but also declared a function called "Menu".
That is where that error comes from. Just change your default function to any other name, such as "MyMenu"
Essentially, I want to generate a QR Code in a ReactJS application. I found a generator on npm for React & React Native. Here is how they set it up on the npm site:
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";
ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
Here is how I set up the page that will hold the QR Code:
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component
{
render()
{
return (
<div>
<h1>QR Code Page</h1>
</div>
);
}
}
//ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
export default Profile;
I have the actual QRCode code commented out, as I'm not sure where to put it in the code so that it works & shows up on the page. When I put it anywhere inside the Profile class the line has red underlines stating that a ";" or ")" is expected (depending on where it's put I get ";" or ")"). I know I'm not missing either, so I'm pretty sure it comes down to where I'm putting the line of code to generate the QRCode.
I'm sorry if this is is an obvious question, I'm still pretty new to React.
Please let me know if you need any more information!
You can just use the <QRCode value="hey"></QRCode>. You also don't need dom library for this. So I've removed it.
import React from "react";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component
{
render()
{
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey"></QRCode>
</div>
);
}
}
export default Profile;
Check out this live version to see it in action
https://codesandbox.io/s/billowing-butterfly-0dr39?file=/src/App.js
you can use it return itself it will work
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey" />
</div>)
Try this.
import React from "react";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component {
render() {
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey" />
</div>
);
}
}
export default Profile;
I recently started using Gatsby for building my websites, previously I relied just on plain html and css, so I may be missing something really basic here...
I am trying to style a custom header component that looks like this
import React from "react"
import MWidth from "./m-width"
import logo from "../resources/images/logo.png"
function Header() {
return (
<>
<MWidth>
<div>
<img src={`${logo}`}></img>
</div>
</MWidth>
</>
)
}
export default Header
after importing it inside the layout component I tried styling it with styled-components like so
const PageHeader = styled(Header)`
background-color: #f0f;
`
but nothing changed.
I saw this approach being used with the Link component, but maybe it's defined in another way. Am I missing something or is it just a Gatsby error?
My Layout.js file looks like this
import React from "react"
import styled from "styled-components"
import Header from "./header"
import Content from "./content"
import Footer from "./footer"
import "./common.css"
const PageHeader = styled(Header)`
background-color: #f0f;
`
function Layout(props) {
return (
<>
<PageHeader />
<Content>{props.children}</Content>
<Footer />
</>
)
}
export default Layout
Let me know if you need more information. Any help would be appreciated.
Thanks 😉
Edit:
Turns out that in order for this to work you have to attach a class name to the element you want to style passing it as a prop.So as ksav suggested I added props into the Header function declaration and className={props.className} to a wrapper div. Now it looks like this
function Header(props) {
return (
<div className={props.className}>
<MWidth>
<div>
<img src={`${logo}`}></img>
</div>
</MWidth>
</div>
)
}
which essentially is the same thing as the one he posted below. And this solved the problem.
Thank you 😄
Styling any component
The styled method works perfectly on all of your own or any third-party component, as long as they attach the passed className prop to a DOM element.
function Header({className}) {
return (
<div className={className}>
<MWidth>
<div>
<img src={`${logo}`}></img>
</div>
</MWidth>
</div>
)
}
I installed bootstrap package with command:
meteor add twbs:bootstrap
And I made some example codes, but it does not work. Bootstrap style is not applied to button.
App.jsx
import React from 'react';
export default class App extends React.Component {
render() {
return (
<button class="btn btn-info">Button</button>
);
}
}
Could you help me, please? Thank you.
You should use className attribute instead of class.