CODEWITHSUNDEEP
javascripthtmlreactjsdom
DavidNyan10
DavidNyan10

Reputation: 199

How to render between two elements in React?

Here's the original HTML:

<div class="chat">
    <div class="uploadArea">
        ...
    </div>
    <section class="title">
        ...
    </section>
    <div class="content">
        ...
    </div>
</div>

I want to render a component between the title and the content. How can I do that?

ReactDOM.render(Component, document.getElementsByClassName("chat")[0]);

wouldn't really work, right?

Upvotes: 0

Views: 990

Answers (1)

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20954

Create an element which you can use as the container for you react application. Insert the created element in the position you want, like in this example after the .title element.

Then use the created element in the ReactDOM.render call.

React 17 and below:

const reactContainer = document.createElement('div');
const target = document.querySelector('.chat .title');

target.after(reactContainer);

ReactDOM.render(Component, reactContainer);

React 18 and above:

const reactContainer = document.createElement('div');
const target = document.querySelector('.chat .title');

target.after(reactContainer);

const root = createRoot(reactContainer);
root.render(Component);

Upvotes: 3

Related Questions