获取此 React.Children.only 预计会收到单个 React 元素子错误以供使用<link>在 Next.js

Question

I have below code. It's giving me error

Error: React.Children.only expected to receive a single React element child.

As i try to resolve it,its allowing me only one header under link.

<div className="container">
    {cards.map(card => (
        <div className="grid-item">
        <Link href={'/ninjas/' + card.id} key={card.id}>
        <h1>{ card.reporter }</h1>
        <h3>{ card.title }</h3>
        </Link>
        </div>
    ))}
</div>

Answer 1

Please first of all read this: Why React.Children.only? The issue can be fixed by doing this:

 <div className="container"> {cards.map(card => ( <div className="grid-item"> <Link href={'/ninjas/' + card.id} key={card.id}> <div> <h1>{ card.reporter }</h1> <h3>{ card.title }</h3> </div> </Link> </div> ))} </div>

In general, Link is a component, and as you can read in the docs of react docs or the link I provided, children should always be nested in one element. The same is true for what every React component should return.