Return DOM element in render function of React component

Question

I have an external library that renders some custom js controls. The library returns a DOM element that can be inserted in to the page.

I am creating wrapper for this library in React. I have it all wired up except I'm not sure how to allow the render function to accept the DOM element as its return

render() {
 if (this.state.someType) {
   let customControl = new this.state.someType();
   var node = customControl.getNode(); 

   return node; //This is an HTMLDOMElement i.e. div or span
 }

 return <div>Loading Custom Control...</div>;
}

I am able to debug the code and everything is working properly. The node is what I expect but the html on the page is never replaced.

Stanislav Mayorov · Accepted Answer · 2022-05-24 13:33:21Z

32

Here's a simple example.

render() {
   const newNode = document.createElement('p'); 
   return <div ref={(nodeElement) => {nodeElement && nodeElement.appendChild(newNode)}}/>
}

edited May 24, 2022 at 13:33

answered May 10, 2017 at 20:38

Stanislav Mayorov

4,4945 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Qwerty Over a year ago

ref will also be called when element is unmounted resulting in nodeElement being undefined for the call. You should include a check nodeElement && nodeElement.appendChild...

KenEucker Over a year ago

This is a good answer as it contains the code example that could go along with the accepted answer. The above commend regarding nodeElement being undefined is also helpful and could be included in this code example.

Walle Cyril · Accepted Answer · 2019-02-07 22:48:29Z

16

Render a normal JSX div. Use ref inside.

Inside the ref callback use .appendChild(node)

See https://reactjs.org/docs/refs-and-the-dom.html

edited Feb 7, 2019 at 22:48

answered May 10, 2017 at 20:29

Walle Cyril

3,2674 gold badges28 silver badges60 bronze badges

Collectives™ on Stack Overflow

Return DOM element in render function of React component

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related