<p> different re-render behavior than <div> in React?
I just ran into a super weird bug that a p tag inside a table was not re-rendering; it would disappear when the component re-rendered which caused an error that crashed everything when the component was removed (Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.)
I switched the p to a div and the problem went away. I also just tested with a p with text inside instead of a state variable and the same behavior happened. Is this a bug in React itself related to <p> nested in <td> (a weird thing to do I realized in hindsight)? I'm still a beginner so I never like to assume that, but it was a really weird bug.
Simply removing this one line fixes things: https://github.com/Rice-Tech/svgmorph/commit/16a5976e037de8b03b1ec14140aec9adc3a08767
3 Replies
For context, the rerender is because a context provides an array that I am mapping out as the props to this component.
vite and next enforce good practices that's it
Is the bad practice the p in a td or something else? I’ve been learning by just diving in and figuring out how to make stuff work vs tutorials, which had been great overall but I may have fallen into some idiosyncratic ways of doing things and I would like to fix that.
It fails in a way that really doesn't seem like Vite enforcing a good practice. The <p> within a <td> is initially rendered, but it is not re-rendered which causes a complete crash when react tries to remove it but it is not there; that is a strange behavior.