Replacing child react component with another based on user intreaction or button click

I have created bootstrap modal component in react.

        var carModal=<Modal handleHideModal={this.handleHideCarModal}
                onConfirm={this.confirmCarModal}
                title="Car"
                id="CarModal">
                <CarStructure callbackParent={this.showCarOptionsUpdate}/>
                </Modal>

In car structure I have a form where based on button click I want to remove <CarStructure> child component from the modal carModal and update it with another component with different form structure. How can I replace <CarStructure> with another component having totally different user interface and options?

Remember that the job of a React component's render function is to describe how the component should look at any given point at time, so you don't "remove" or "change" pieces of the DOM so much as you describe when they should change themselves. So, you'll want to base the internal component of <Modal> on some sort of state (which may change throughout the life of the parent component). Something like this might do the trick:

var carModalBody;
if (this.state.something) {
  var carModalBody = <CarStructure callbackParent={this.showCarOptionsUpdate} />;
} else {
  var carModalBody = <SomeOtherComponent />;
}

var carModal = <Modal handleHideModal={this.handleHideCarModal}
                      onConfirm={this.confirmCarModal}
                      title="Car"
                      id="CarModal">
                        {carModalBody}
               </Modal>