react-js-how-to-append-a-component-on-click

import React from 'react';
import ReactDOM from 'react-dom';


class AppComponent extends React.Component {
  state = {
    numChildren: 0
  }
  
  render () {
    const children = [];
    
    for (var i = 0; i < this.state.numChildren; i += 1) {
      children.push(<ChildComponent key={i} number={i} />);
    };
    
    return (
      <ParentComponent addChild={this.onAddChild}>
        {children}
      </ParentComponent>
    );
  }
  
  onAddChild = () => {
    this.setState({
      numChildren: this.state.numChildren + 1
    });
  }
}

const ParentComponent = props => (
  <div className="card calculator">
    <p><a href="#" onClick={props.addChild}>Add Another Child Component</a></p>
    <div id="children-pane">
      {props.children}
    </div>
  </div>
);

const ChildComponent = props => <div>{"I am child " + props.number}</div>;


ReactDOM.render(<AppComponent/>, document.getElementById('root'));

Sandbox with demonstration of the above code

Using classes as shown above
https://codesandbox.io/s/react-js-how-to-append-a-component-on-click-using-hooks-xhjkhw?file=/src/App.js

Using hooks
https://codesandbox.io/s/react-js-how-to-append-a-component-on-click-using-hooks-xhjkhw?file=/src/App.js

Thank you for sharing your code! Helped me a lot for my idea :)

thanks you very much

tysm!!!

Awesome thanks!