CODEWITHSUNDEEP
reactjsjsxnext.js
Yohanelly
Yohanelly

Reputation: 69

Using next js for a static website

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

Upvotes: 0

Views: 266

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195962

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.

Upvotes: 1

Related Questions