Add react component to html element

Question

I have a containerElement and a react component. I want to add the react component into the containerElement. Is there a way I can do it? I have tried containerElement .appendChild(), but not working.

const containerElement = document.getElementById(divId);
React component: <ReactComponent></ReactComponnet>

Use ReactDOM.render reactjs.org/docs/react-dom.html#render — artanik
– artanik, Commented Mar 12, 2020 at 22:13

faboulaws · Accepted Answer · 2020-03-12 22:23:37Z

2

ReactDOM.render(<ReactComponent/>, document.getElementById(divId));

answered Mar 12, 2020 at 22:23

faboulaws

2,07818 silver badges17 bronze badges

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

1 Comment

John Over a year ago

You also need to import ReactDOM from "react-dom" or similar.

laujonat · Accepted Answer · 2020-03-12 23:40:15Z

Following the React lifecycles, you shouldn't have to insert the component into your parent component (containerElement). The react component should be inserted in the normal flow as a child or grandchild of the parent component.

If I'm understanding your question correctly, you need to handle the case where you are getting the DOMElement outside the normal flow of the React lifecycle. For that you can use refs.

For example below, define the component you're trying to insert somewhere in the render lifecycle of your container. No matter how nested the child is, you can "get" the child DOM element just like you are trying to do with document.getElementById from your question.

class Parent extends React.Component {
   constructor(props) {
      super(props);
      this.myRef = React.createRef();
   }

   render() {
      return (
         <FunctionComponent ref={this.myRef} />
      );
   }
}

Hope this helps

Collectives™ on Stack Overflow

Add react component to html element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related