Warning: validateDOMNesting (...): a can not appear as a descendant of a

Question

Warning: validateDOMNesting (...): a can not appear as a descendant of a

Navigation

#1 by (1 votes)

0

Hello, I'm trying to use the Link component of react-router-dom to generate links in a data table, however, I'm 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.

react react-router

asked by anonymous 26.07.2017 / 18:44

1 answer

Date parser in C What class similar to AesCryptoServiceProvider in .NET Core?

score 1 · Answer 1

I had a problem similar to this 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 .

See this part of your code:

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

and right below you render the component DropdownButton which by what I think is a component that generates Link .

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

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

As you can see, there is a Link inside the other and this is invalid. To work around this, change what the most external component type to, for example, a div .

So a valid output should be:

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