validateDOMNesting(...): <a> cannot appear as a descendant of <a>.

I’m trying to make whole Media clickable, but got the warning: index.js:2178 Warning: validateDOMNesting(…): cannot appear as a descendant of .

import React from 'react';
import { Media } from 'reactstrap';

class someClass extends React.Component {
    render() {
        const item = this.props.item
        const url = item.url
        return (
            <a className="someClass" href={url}>
                <Media className="mt-1 align media-block">
                    <Media left bottom>
                        <img src={item.image} alt="logo" className="media-logo"/>
                    </Media>
                    <Media body>
                        <Media heading>
                            {item.name}
                        </Media>
                        {item.description}
                    </Media>
                </Media>
            </a>
        )
    }
}

export default someClass;

[TheSharpieOne]

Notice the tag prop on the Media which has left, it’s needed for the workaround. The example I posted above has that and gets no errors or warnings.

[TheSharpieOne]

What @gergely-nagy said is correct, but I think this may also be a slight defect. reactstrap is defaulting <Media left/right ...> to an anchor tag (<a>) which causing the nested a within an a. We probably should only default that in the case there is an href prop (to indicate there should be a link)

https://github.com/reactstrap/reactstrap/blob/6eac0fd5719eb07a2350bcd41462bc4a2946c8b8/src/Media.js#L40-L50

I think we can do some better defaulting there. For instance, not only can we only make it an anchor tag (a) when there is an href (attributes.href && (left || right), we probably should only make it an image tag (img) when there is a src (attributes.src && object)