javascript - React/Flux: strange error while rendering -
i getting error while dynamically rendering component in react
findcomponentroot(..., .0.1.1.0.1.0.5.0.1:4): unable find 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
i have checked out markup , seems fine. error changes on element, mean, appears affect element appears on other elements.
here render object:
render: function(){ var _slots = function(id, h, handleclick){ //react way var daysforslot = this.props.workingdays.map(function(day, i){ var spanactive = this.state.appointments.map(function(appointment){ var _activeclass = null; var _s = null; if(h.hour+day === appointment.hour+appointment.day){ _activeclass = 'active' } if(_activeclass){ _s = <span classname='active'>{appointment.patient.name}</span> } return ( {_s} ) }); return ( <td id={h.hour+day} onclick={handleclick.bind(null, {hour: h.hour, day:i})}> {spanactive} </td> ) }.bind(this)); return( <div> <td>{h.text}</td> <span>{daysforslot}</span> </div> ) }.bind(this); //creates working hours days , bind click //handler hour slots var _schedule = this.props.workinghours.map(function(h, i){ return ( <tr> <span>{_slots(i, h, this.handleclick)}</span> </tr> ) }.bind(this)); return( <span> {_schedule} </span> ) } thanks in advance comments.
the html you're outputting invalid. have td directly inside of div - must direct child of tr. have span child of tr, not valid.
Comments
Post a Comment