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

Question

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?

Answer 1

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

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