How to use Next.js Link with multiple children?

user_18157918 0
Viewed 1478

How to use Link in Next.js with multiple <div> inside this <div>? I have img tag for Link, paragraph for link , title for link.

Error: Multiple children were passed to with href of /article but only one child is supported https://nextjs.org/docs/messages/link-multiple-children Open your browser's console to view the Component stack trace.

<Link href="/article" title="">
      <div >
          <h4>{props.featurename}</h4>
          <a href="/author"><h3>{props.featuredesc}</h3></a>
      </div>
      <div className="img-entry">
          <Image src="/images/more-img.png" width={265} height={290} title="" alt="" />
      </div>
</Link>
next.js reactjs
1 Answers

Use fragments in order to group multiple element under one main child that won't be visible in the tree. (https://reactjs.org/docs/fragments.html#gatsby-focus-wrapper)

      <Link ***href***="/article" title="">
       <>
        <div >
          <h4>{props.featurename}</h4>
          <a href="/author"><h3>{props.featuredesc}</h3></a>
        </div>
        <div className="img-entry">
          <Image src="/images/more-img.png" width={265} height={290} title="" alt="" />
        </div>
       </>
      </Link>
user_62701180
Related