Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`render` appends instead of replacing

See original GitHub issue

React: http://codepen.io/anon/pen/LGdaMd Preact: http://codepen.io/anon/pen/GoxePz

Expected: print 2 on screen Actual: prints 1 and 2 on screen

This prevents a correct comparison in the vdom benchmark because it causes the update benchmarks to measure the cost of full creation of a tree instead: http://vdom-benchmark.github.io/vdom-benchmark/

Issue Analytics

State:
Created 8 years ago
Reactions:4
Comments:10 (4 by maintainers)

Top GitHub Comments

8reactions

developitcommented, Aug 2, 2016

@mikestead Good call, thanks for leaving the note. If it’s only a text or comment node and you’re expecting an Element, you could also try node.firstElementChild (example). For picking up from SSR though, I think your solution is still the most robust.

4reactions

mikesteadcommented, Aug 2, 2016

Just in case any others trip up on this one, I was running into duplicates but it was down to node.firstChild returning a #text node due to white space, e.g. http://codepen.io/anon/pen/bZxqRv?editors=1010

The solution was to target the child directly http://codepen.io/anon/pen/AXPqrk?editors=1010

Or simply strip the white space between parent and child elements if using firstChild.

Top Results From Across the Web

ReactDOM.render append instead of replace - Stack Overflow

render method only allows me to fully replace all contents of an HTMLElement instead of adding one. I've tried the following:

[Solved]-ReactDOM.render append instead of replace-Reactjs

Coding example for the question ReactDOM.render append instead of replace-Reactjs.

Phx-update="append" seems to replace items instead of ...

Hi! I'm creating an infinitescroll and the current behaviour is: when I scroll at the very bottom, existing elements are replaced instead of ......

Customize SFRA Controllers and Routes

append to customize the ViewData object passed to the rendering template. Instead, simply replace the route entirely. Related concepts. Add Custom Cartridges.

ReactDOM – React

render () controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later...