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

Question

Hello, I’m trying to use the component Link of react-router-dom to generate links in a data table, however, I am facing the following problem:

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

The code

function mapStateToProps(state) {
  return {
    pages: state.pages.map((page, index) => {
      let dropdownBtnOpts = [{
        text: 'Editar',
        to: '/admin/pages/' + page._id + '/edit',
        icon: 'edit'
      }, {
        text: 'Excluir',
        icon: 'delete',
        onClick: () => {
          handleDeletePage(page._id)
        }
      }];

      page._id = page._id.toString();
      page.title = page.title;
      page.url = <Link to={page.url}>{page.url}</Link>;
      page.published = page.published;
      page.actions = <DropdownButton state='default' size='small' options={dropdownBtnOpts}>Opções</DropdownButton>;

      return page;
    })
  };
}

My problem is on the line:

page.url = <Link to={page.url}>{page.url}</Link>;

The result is something like:

<Link to=''> <Link to='/url'></Link> </Link>

Some clarification will be welcome, thank you.

Answer 1

I had a similar problem using Material-UI 1.0-beta. The problem you are having is that you are rendering a link tag (<a>) one inside the other, which is an invalid HTML markup and React gives this warning.

Look at this part of your code:

let dropdownBtnOpts = [{
    text: 'Editar',
    to: '/admin/pages/' + page._id + '/edit',
    icon: 'edit'
  }, 

and just below you render the component DropdownButton which, it seems to me, is a component that generates Link.

If you notice, in the generated component tree you have placed here is exactly the problematic HTML markup:

<Link to=''>
  <Link to='/url'></Link>
</Link>

As you can see, there’s a Link inside each other and this is invalid. To circumvent this, change the most external component type to, for example, a div.

So a valid exit should be:

<div>
  <Link to='/url'></Link>
</div>