validateDOMNesting warning React

Question

I have a React component that is clickable as a whole, but also contains buttons inside.

So something like

  ...
  <         


        

Answer 1

Nesting anchor tags (which is what transpiles to) is forbidden in HTML. Even if you get the desired result, it is only because your browser is clever and has its own work-arounds. However, that behavior cannot be guaranteed across all browsers and platforms.

How seriously should I take this?

As per the above, I'd say quite seriously.

What would be the workaround?

The following isn't a workaround, but what I consider to be the "proper" implementation.

I'd programatically implement the navigation for the wrapping element and use the for the buttons. So something like:

navigate = () => {
  //push "path1" to history
}

render() {
  return(
    

      Some button
      Some button
    
  );
}

For more info about programatically navigating in React Router see one of the links below:

• For React Router v1-v3: Link
• For React Router v4: Link