Rendering components on a button click in React.js : Im creating a page in that if user clicks a add more button text box should be added as many time the user clicks

I have created a component there I created texbox. I tried to render this component to another component on button click but it is not rendering`enter code here`


----------


    class Addmore extends React.Component {
      render() {
        return (
          <div>
            <label className="float-left"> CC</label>
            <input type="text" class="form-control" />
          </div>
        );
      }
    }
    
    class abc extends React.Component {
        constructor(props)
        {
            super(props);
        }
      state = {
        addcomp: false
      };
     
      click() {
        this.setState({
            addcomp: true,
          });
         var x= document.getElementById("more");
         x.parentNode.appendChild(<Add/>);
      }
      render() {
        return (
                <div class="row">
                <div class="col-3">
                <label className="float-left"> BU</label>
                 <input type="text" class="form-control" />
              

                 <div id="more">
                                      
                  //HERE I HAVE TO RENDER ADDMORE
                             COMPONENT

                 </div>
                                
                 <div class="col-3">
                      <button type="button" onClick={this.click.bind()}>
                                    Add more
                      </button>
                 </div>
        );
      }
    }
    export default abc;