javascript - Invariant Violation: processUpdates(): Unable to find child 0 of element -

i'm getting below error randomly while page load.

uncaught error: invariant violation: processupdates(): unable find child 0 of element. means dom unexpectedly mutated (e.g., browser), due forgetting when using tables, nesting tags <form>, <p>, or <a>, or using non-svg elements in <svg> parent. try inspecting child nodes of element react id .0.1.3.

i can see empty p there not sure or how fix this. react doesn't throw error each time.

here code:

var react = require('react'),     projectdata = require('./../../projects.json'),     projects = projectdata.projects;  var project = react.createclass({     getcurrentproject: function() {         for( var =0; < projects.length; i++) {             if(projects[i].id == this.props.params.id) {                 return projects[i];             }         }     },        getnextprojectid: function() {         var currentprj = this.getcurrentproject();         var nextprjid;          if(currentprj.id == 1) {             nextprjid = projects.length;                 return nextprjid;         } else {             nextprjid = currentprj.id - 1;              return nextprjid;         }     },      render: function() {         var currentproject = this.getcurrentproject(),             nextproject          return(             <div>                 <div classname="jumbotron">                     <div classname="container">                         <h1>{currentproject.title}</h1>                     </div>                   </div>                   <div classname="container">                     <p classname="text-center eeebackground"> <img id="projectimg" src={currentproject.image} alt="project image" /></p>                     <br />                     <div dangerouslysetinnerhtml={{__html: currentproject.htmldescription}} />                           <p>                         {/* jsx if else condition*/ }                         {(currentproject.link                             ? <p id="website-link"><a target="_blank" href={currentproject.link}>                                 <span classname="glyphicon glyphicon-menu-right">visit website </span>                               </a></p>                             : <br />                         )}                     </p>                     <p>                          <h3>technology stack</h3>                         <div id="skills">                             {currentproject.skills.map(function(key, i){                                 return <span key={i} classname="label label-default"> {key} </span>                             })}                         </div>                                   </p>                     <p classname="text-right">                         <a href={'#/project/'+this.getnextprojectid()}>                             <span classname="glyphicon glyphicon-menu-right">next project &nbsp;&nbsp;&nbsp;</span>                         </a>                     </p>                 </div>             </div>         );      } });  module.exports = project; 

update nested p tags causing issue. replaced them div , issue has been fixed.

your empty <p> tags generated result of trying contain other <p> or <div>tags inside <p> tags. should wrap them in divs instead

 <p>         {/* jsx if else condition*/ }         {(currentproject.link             ? <p id="website-link"><a target="_blank" href={currentproject.link}>             <span classname="glyphicon glyphicon-menu-right">visit website </span>           </a></p>         : <br />     )} </p> 

and here

<p>      <h3>technology stack</h3>     <div id="skills">         {currentproject.skills.map(function(key, i){             return <span key={i} classname="label label-default"> {key} </span>         })}     </div>               </p> 

i'm not solve problems should @ least clean dom make bit easier find problem