Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

Nested anchor tag causing validateDOMNesting warning in React code

15 replies
Last updated: Nov 12, 2021
I'm trying to make whole article clickable, but got the warning: Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a> AND Warning: Expected server HTML to contain a matching <figure> in <a>.

components/HeroPost/index.js
import CoverImage from '../../CoverImage';
import Link from '../../Link';
import SectionSeparator from '../../SectionSeparator';
import React from 'preact/compat';


export default function HeroPost({
                                     coverImage,
                                     slug,
                                     displayExcerpt,
                                     displayTitle,
                                 }) {
    return (
        <div className="front-container" data-row-id='1'>
            <div className="row-grid-container">
                <Link href={`/posts/${slug}`}>

                    <CoverImage slug={slug} imageObject={coverImage} title={displayTitle} url={coverImage}/>
                    <div className="title-container">
                        <p className="excerpt">{displayExcerpt}</p>
                        <h3 className="title">
                            <a>{displayTitle}</a>
                        </h3>

                    </div>
                </Link>

            </div>
            <SectionSeparator/>
        </div>

    );
};

components/PostPreview/index.js:

import CoverImage from '../../CoverImage';
import Link from '../../Link';
import {imageBuilder} from '../../../lib/sanity';

export default function PostPreview({
                                        title,
                                        coverImage,
                                        slug,
                                        displayTitle,
                                        displayExcerpt,
                                    }) {
    return (
        <article>
            <Link href={`/posts/${slug}`}>
                <div className="image-container">
                    <CoverImage slug={slug} title={title} imageObject={coverImage}
                                url={imageBuilder(coverImage).url()}/>
                </div>
                <p className="excerpt">{displayExcerpt}</p>
                <h3 className="title">
                    <a className='hover:underline'>{displayTitle}</a>
                </h3>
            </Link>
        </article>
    );
}
If i put Link over &lt;h3&gt; i will not get the warning, but then the article is not clickable, only the img and title.


I found this:

This is the code which causing the error,

<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
Which is converted to,

<a><a></a></a>
So you are getting error,

Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>
To solve this just use one of the follow,

<NavLink id="RouterNavLink" style={None} to="/contact">anywords</NavLink>
OR,

<Link id="RouterNavLink" style={None} to="/contact">anywords</Link>
but i'm not sure how to apply this in this code, i might need a work around or structure the code differently. Hope there is someone here who can help, thanks!
Nov 12, 2021, 11:21 AM
This seems like more of a React issue not a sanity one, but it seems like you might have an anchor 
<a>
tag nested within another 
<a>
tag.What is the code for your 
Link
?
Nov 12, 2021, 11:50 AM
The Link: 

import React from 'react'
import NextLink from 'next/link'

interface Props {
    children: Array<JSX.Element | string | null> | JSX.Element | string | null
    className?: string
    href: string
    target?: string
    rel?: string
    onClick?: (event: React.MouseEvent<Element, MouseEvent>) => void
}

const Link: React.FC<Props> = ({ children, href, className, target, rel, onClick }) => {
    // @ts-ignore
    function handleClick(e) {
        if (e.type === 'click' || e.key === 'Enter') {
            onClick?.(e)
        }
    }

    return (
        <NextLink href={href}>
            <a
                className={className}
                target={target}
                rel={rel}
                {...(onClick
                    ? {
                        onClick,
                        onKeyPress: handleClick,
                        role: 'link',
                        tabIndex: 0,
                    }
                    : {})}
            >
                {children}
            </a>
        </NextLink>
    )
}

export default Link

Nov 12, 2021, 11:52 AM
Yeah so you've got two nested 
a
tags here. The 
a
tag that sits in your 
Link
component, and then another one that lives in the 
children


            <Link href={`/posts/${slug}`}>
                <div className="image-container">
                    <CoverImage slug={slug} title={title} imageObject={coverImage}
                                url={imageBuilder(coverImage).url()}/>
                </div>
                <p className="excerpt">{displayExcerpt}</p>
                <h3 className="title">
                    <a className='hover:underline'>{displayTitle}</a>
                </h3>
            </Link>

Nov 12, 2021, 11:53 AM
to fix, just change 
<a className='hover:underline'>{displayTitle}</a>
to 
<span className='hover:underline'>{displayTitle}</span>
Nov 12, 2021, 11:54 AM
and do the same anywhere else you've used a nested anchor tag
Nov 12, 2021, 11:54 AM
i'm still getting the warning, unfortunately 😞
    return (
        <div className="front-container" data-row-id='1'>
            <div className="row-grid-container">
                <Link href={`/posts/${slug}`}>

                    <CoverImage slug={slug} imageObject={coverImage} title={displayTitle} url={coverImage}/>
                    <div className="title-container">
                        <p className="excerpt">{displayExcerpt}</p>
                        <h3 className="title">
                            <span>{displayTitle}</span>
                        </h3>

                    </div>
                </Link>

            </div>
            <SectionSeparator/>
        </div>

    );
};
and


    return (
        <article>
            <Link href={`/posts/${slug}`}>
                <div className="image-container">
                    <CoverImage slug={slug} title={title} imageObject={coverImage}
                                url={imageBuilder(coverImage).url()}/>
                </div>
                <p className="excerpt">{displayExcerpt}</p>
                <h3 className="title">
                    <span className='hover:underline'>{displayTitle}</span>
                </h3>
            </Link>
        </article>
    );
}
Nov 12, 2021, 11:57 AM
The 
validateDOMNesting
warning?
Nov 12, 2021, 11:58 AM
It looks like you're passing a url to 
CoverImage
does this component contain another anchor tag?
Nov 12, 2021, 11:59 AM
yes, Warning: validateDOMNesting(...): &lt;a&gt; cannot appear as a descendant of &lt;a&gt;. and Warning: Expected server HTML to contain a matching &lt;figure&gt; in &lt;a&gt;.
Nov 12, 2021, 11:59 AM
Ah wait that's the image url
Nov 12, 2021, 11:59 AM
Your best bet is to check the rendered code to see if there's another &lt;a&gt; tag nested anywhere
Nov 12, 2021, 12:00 PM
You're passing a slug to 
CoverImage
so maybe there's an 
a
tag in there afterall
Nov 12, 2021, 12:00 PM
yes, thanks. It was the CoverImage. I changed it to span too and that fixed my problem. Thank you!
Nov 12, 2021, 12:01 PM
No problem 🙂 in future you're probably better asking for help in a dedicated web dev server such as Reactiflux
https://www.reactiflux.com/
Nov 12, 2021, 12:03 PM
Awesome, thanks!
Nov 12, 2021, 12:04 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?