I have one parent component and child component. I have to get the id from child in parent component and place button in the parent component using ReactDom.render(somebutton, Id_of_the_child).

This one I have written in the component did update. But it's not working. Can anyone help me with this why this isn't working? Not able to get the child id in parent itself.

Index.js:

import React, { Component } from "react";

class parentComponent extends Component {
    constructor(props) {
         super(props); 
    }

    onClick = () =>{
         console.log("some functionality is done")
    }

    componentDidMount(){
        if(document.getElementById("child_place_holder")){
             ReactDOM.render(< button onClick={this.onClick} 
        />,$("#child_place_holder")[0]);

        }
    }

    render() {
        return (
          <div>
             <ChildComponent/>
          </div>
        );
    }
}

export default parentComponent;

ChildComponent.js:

import React, { Component } from "react";

class ChildComponent extends Component {
   constructor(props) {
       super(props);  
   }

   componentDidMount(){}
  
   render() {
      return (
        <div>
          <span id = "child_place_holder"> </span>
        </div>    
      );
   }
}