error - React.Children.only expected to receive a single React element child.
There were quite a few questions with the same context, I tried those solutions but have not found a solution.
The Navbar of the website is what is giving me the error. There is a section over the Navbar which renders properly, when I try to render the Navbar below it throws the error.
import Link from 'next/link'
import Head from '../components/head'
import Download from '../components/nav'
import NavBar from '../components/header'
import Footer from '../components/footer'
import htmlContent from 'html-loader!../legacy/index.html'
const Homepage = () => (
<div>
<Head />
<Download/>
<NavBar />
<div dangerouslySetInnerHTML={{__html: htmlContent}} />
<Footer />
</div>
);
export default Homepage
The footer shows properly, head tag is for all the meta data etc(also works). Github link to all the code is-https://github.com/yohanelly/website-jsx/tree/master/components
The problem is with the whitespace between the Link and the a tag.
<Link href="#"> <a className="menu-links features">Features</a></Link>
should be either
<Link href="#"><a className="menu-links features">Features</a></Link>
or
<Link href="#">
<a className="menu-links features">Features</a>
</Link>
Read the Children in JSX section of the React docs for more info.
Related
I am learning how to use components using React.
My page works fine, but if I move a component to another JS file and attempt to import it, my page goes completely blank.
Here is the working code where the imports are commented out.
//import Header from "./Header.js"
//import Footer from "./Footer.js"
function Body () {
return (
<div>
<h1>Reasons I am excited to learn react</h1>
<ol>Reasons
<li>Popular</li>
<li>Functional</li>
<li>I can build apps</li>
</ol>
</div>
)
}
function Page() {
return (
<div>
{/* <Header /> */}
<Body />
{/* <Footer /> */}
</div>
)
}
ReactDOM.render(<Page />, document.getElementById("root"))
and here is the Header I am trying to import
export default function Header () {
return (
<header>
<nav className="nav">
<img className="nav-image" src = "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" />
<ul className="nav-items">
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
)
}
There is no error message when the lines are uncommented, but when I open the HTML document the page, which displayed before, is always blank.
Why is it that when I uncomment either of the import lines from the top, my page renders completely blank?
Update: It looks like it is a general problem with import; if I add:
import React from 'react';
to the top, it also makes the page render as a blank white screen.
Per recommendation in the comments, I put it in an online editor (Code Sand Box), and the code works fine there. I guess the problem is with how I have Visual Studio Code set up?? I was using live server and then tried to use npm, but didn't quite figure out how to get npm to render the page.
Try using this import:
import Header from "./Header"
Maybe show your folder structure, if it is not working.
ReactDOM.render(<Page />, document.getElementById("root"))
Change above line as below
import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.querySelector("#root")).render(
<React.StrictMode>
<Page />
</React.StrictMode>
);
I am having some troubles integrating a component from the outside library 'react-calendly', the PopUpButton widget specifically, that requires the parent DOM node to be inserted into. My current understanding is that my issue is being caused by the fact that Next.js uses SSR and therefore I do not have access to the browser. How can I work around this? For reference, my website is a very simple fullstack app for his business and I am new to React/full-stack development. Here is the code for the app portion that renders my page components:
import '../styles/globals.css'
import styles from '../styles/App.module.css'
import Navbar from '../components/navbar'
import Footer from '../components/footer'
function MyApp({Component, pageProps}) {
return (
<div className={styles.app}>
<div>
<Navbar />
</div>
<div className={styles.body} id="body">
<Component props={pageProps} />
</div>
<div>
<Footer className={styles.footer}/>
</div>
</div>
)
}
export default MyApp
And here is the code for my specific page component:
import styles from '../styles/Home.module.css'
import Head from 'next/head'
import { PopupButton } from 'react-calendly'
export default function Home() {
return (
<div className="home">
<Head>
<title>Homepage</title>
</Head>
<div className="cal_div">
<PopupButton
url="https://calendly.com/my_url"
rootElement={document.getElementsById("body")}
text="Click here to schedule!"
/>
</div>
</div>
)
}
I have a React.js based widget that I have embedded on a shopify website. It works great for most sites.
For one site, the ajax-cart.js.liquid code is causing a problem with the react router and the page url changes and the page hosting the widget loads that url - causing a 404.
How can I ringfence the React App and Router functionality so that it is not broken or taken over by page js?
Here you can see it working correctly. Click the P bottom right and click Join.
https://www.puctto.me/collections/all
Here you can see it not working. Click the P. The url bar changes and the page navigates.
https://shoezie.com.au/
I'm loading ReactRouter like this:
import React from "react";
import {
Switch,
Route,
Redirect
} from "react-router-dom";
import { MemoryRouter } from 'react-router'
import axios from "axios";
export default class App extends React.Component {
//app code
}
And then in my FooterGuest component I have used Link from react-router
import React from "react";
import {
// BrowserRouter as Router,
// Switch,
// Route,
Link
} from "react-router-dom";
export function FooterGuest(){
return (
<div className="widget-footer widget-footer--login ">
<h3 className="widget-footer-header ">
Sign in to upload your own photo
</h3>
<div className="widget-footer__register-bar">
<Link to="/signin" className="ui inverted button" >Sign In</Link>
<Link to="/join" className="ui inverted button" >Join</Link>
</div>
</div>
)
}
You could try to add this to prevent the redirect:
export function FooterGuest(){
const stopPropagation = (e)=>{
e.stopPropagation()
}
return (
<div className="widget-footer widget-footer--login ">
<h3 className="widget-footer-header ">
Sign in to upload your own photo
</h3>
<div className="widget-footer__register-bar">
<Link to="/signin" className="ui inverted button" onClick={stopPropagation} >Sign In</Link>
<Link to="/join" className="ui inverted button" onClick={stopPropagation} >Join</Link>
</div>
</div>
)
}
I'm using Link on react-router-dom and whenever I see my terminal it always says " 'Link' is defined but not used" but I already declared in on my code and my Link tag does not redirect on on a component it stays on the page and never refreshes it but the url changes
here's my block code on my div to Link:
import React from 'react';
import { Link } from 'react-router-dom';
import user from '../images/user.png';
const ContactCard = (props) =>{
const {id, name, email} = props.contact;
return(
<div className="item">
<img className="ui avatar image" src={user} alt="user"/>
<div className="content">
<Link to={`/contact/${id}`}>
<div className="header"> {name}</div>
<div>{email} </div>
</Link>
</div>
<i className="trash alternate outline icon right floated"
style={{color:"red"}}
onClick={()=> props.clickHandler(id)}>
</i>
</div>
);
};
export default ContactCard;
the error i'm getting:
Line 2:10: 'Link' is defined but never used
Try reinstalling react router and start the app over. Also, remove React.StrictMode - it prevents it from redirecting. It actually does but you have to refresh your page to see it.
This question already has an answer here:
Cannot apply any Bootstrap style in using React-bootstrap library
(1 answer)
Closed 5 years ago.
I'm trying to make a navbar using react-bootstrap, but when I render it I get this:
I'm not getting any error messages, and I can't find any documentation explaining what I've got, but clearly I'm doing something wrong. Any ideas?
This is the code I'm using:
import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap/lib/';
const Toolbar = () => {
return (
<Navbar staticTop collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
Brandname Goes Here
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1}>Contact Us</NavItem>
<NavItem eventKey={2}>About Us</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default Toolbar;
go to react-bootsrap getting started tab
and copy the link under the <!-- Latest compiled and minified CSS --> description into your index.html <head> tag, and if you installed react-bootstrap using npm, then you can import the navbar like so:
import { Navbar, Nav, NavItem } from 'react-bootstrap';
It is clear that you haven't imported bootstrap.min.css. Import it in your index.html as follows.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
I cannot recommend to use something like import 'react-bootstrap/*/*.css' because I am not sure which framework and which loaders(eg: webpack) you are using.