Как динамически добавить компонент в React?
Сделайте под это дело отдельный компонент. Никаких appChild - это реакт.class MyClickableComponent extends React.PureComponent {
  construct(props, context) { 
    super(props, context)

    this.state = {
      isOpen: false,
    }
  }

  handleClick = e => {
    this.setState({ isOpen: true })
  }

  render() {
   const { isOpen } = this.state

    return (
      <div>
        <div onClick={this.handleClick }>click on me</div>
        {isOpen && (
          <b>opened!</b>
        )}
      </div>
    )
  }
}ReactDOM.render(
        <div>
            <Month />
                   <MyClickableComponent  />
            <Content />
        </div>,
  document.getElementById('root')
);
Google сразу выдает порядком вопросов, но в общем случае, если речь идет об однотипных компонентах, вот хороший ответ. Суть в нем сводится в том, что вы рендерите компоненты, на основе данных в state (это можеть бы так же и props, пришедшие из родителя..).
(перевел главный кусок с ответа по ссылке выше)// ...
// SampleComponent - ваш однотипный компонент
// ...

class Test extends Component {
    constructor(props) {
        super(props)
        this.addChild = this.addChild.bind(this)
        this.state = {
            components: [
                {
                    id:1, name: 'Some Name'
                }
            ]
        }
    }

    addChild() {
        // Изменение стейта спровоцирует перерисовку
        this.setState(this.state.concat([
            {id:2,name:"Another Name"}
        ]))
    }
    render() {
        return (
            <div>
                <h1>App main component! </h1>
                <button onClick={this.addChild}>Add component</button>
                { // здесь будет отрисовано необходимое кол-во компонентов
                    this.state.components.map((item) => (
                        <SampleComponent key={item.id} name={item.name}/>
                    ))
                }
            </div>
        );
    }
}