Return DOM element in render function of React component
dom, javascript, reactjs
Solution
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
Problem
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.