Getting this React.Children.only expected to receive a single React element child error for using in 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>

score 1 · Answer 1 · answered Apr 03 '21 at 07:08

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.

Getting this React.Children.only expected to receive a single React element child error for using in Next.js

1 Answers1