How to fix the validateDOMNesting warning with React?

Spread the love

To fix the validateDOMNesting warning with React, we shouldn’t nest anchor element in another anchor element.

For instance, we write

navigate = () => {
  //...
};

<div onClick={this.navigate}>
  <Link to="path2">Some button</Link>
  <Link to="path3">Some button</Link>
</div>

to add 2 React Router Links which render to anchor elements.

And then we set onClick on the div to the navigate method which navigates to another route programmatically.

Then we don’t have any nested anchor elements.

By John Au-Yeung