Skip to content

React –> Warning: validateDOMNesting(…):

cannot appear as a descendant of

I’m getting this warning in browser console:

warning.js?da67:33 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

on line:

<p>{this.state.error && <p className="errorText">{this.state.error}</p>}</p>

It’s a react project. Also I’m using webpack. How to solve this problem?


The warning tells you what exactly you need to do. You cannot nest <p> tags and hence use div for the outer tag like

   {this.state.error && 
      <p className="errorText">