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

[CruiseMan]

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;

[gergely-nagy]

Hi @CruiseMan !

You should use onClick method instead of wrapping <Media/> component in <a/> tag.

Demo:
https://stackblitz.com/edit/reactstrap-v5-media-click?file=Example.js

[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)

reactstrap/src/Media.js

Lines 40 to 50 in 6eac0fd

	if (heading) {
	defaultTag = 'h4';
	} else if (left || right) {
	defaultTag = 'a';
	} else if (object) {
	defaultTag = 'img';
	} else if (list) {
	defaultTag = 'ul';
	} else {
	defaultTag = 'div';
	}

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)

[CruiseMan]

How do i make after click redirect to href url ? This not working

<Media 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>
</Media>

[TheSharpieOne]

<Media tag="a" href={url}>
  <Media className="mt-1 align media-block">
    <Media left bottom tag="div">
      <img src={item.image} alt="logo" className="media-logo" />
    </Media>
    <Media body>
      <Media heading>
        {item.name}
      </Media>
      {item.description}
    </Media>
   </Media>
</Media>

[CruiseMan]

🤔warning still there

[TheSharpieOne]

https://stackblitz.com/edit/reactstrap-v5-media-click-p3ufgg?file=Example.js
no warning for me

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

class Example extends Component {
  render() {
    return (
      <Media tag="a" href="something">
        <Media className="mt-1 align media-block">
          <Media left bottom tag="div" className="mr-2">
            <img src="https://github.com/TheSharpieOne.png?size=60" alt="logo" className="media-logo" />
          </Media>
          <Media body>
            <Media heading>
              TheSharpiOne
            </Media>
            Front-end Developer
          </Media>
        </Media>
      </Media>
    )
  }
}

export default Example;

[CruiseMan]

Works only if i remove left

[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.