React render insert adjacent element

Question

How do I specify position relative to the element when calling React render on an element and its container?

i.e.
ReactDOM.render(element, document.getElementById('divInTheBody'));

Say I want to insert this element before the element itself ('beforebegin'). How do I do that?

https://reactjs.org/docs/react-dom.html#render
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

You can't. Dynamically insert a new element there and render your react component into it. — Andy Ray, Mar 03 '18 at 02:58

score 0 · Answer 1 · answered Jun 24 '22 at 08:25

First, add an 'id' to the JSX element you want to manipulate -

<div id="foo" style={{position: 'relative'}}> Some Text</div>

Now in your component, you can call

useEffect(() => {
    let elem = document.getElementById('foo')
    elem.insertAdjacentHTML('beforebegin', 
        <div style={{position: 'absolute' bottom:'10px'}}>
            Dynamic Component
        </div>)
}, [])

I hope this is what you are looking for.

React render insert adjacent element

1 Answers1