LifecycleDemo.js

import React from "react";

class LifecycleDemo extends React.Component {
    constructor() {
        super()
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.props.onClose();
    }
    
    componentDidMount() {
        console.log('componentDidMount')
        document.addEventListener('click', this.handleClick);
    }

    componentWillUnmount() {
        console.log('componentWillUnmount')
        document.removeEventListener('click', this.handleClick)
    }

  render() {
    console.log("render called");
    return (
      <div
        style={{ position: "absolute", top: 50, left: 50, right: 50, bottom: 50, background: 'red' }}
      >
        Lifecycle demo component
      </div>
    );
  }
}

export default LifecycleDemo;

LifecycleWrapper.js

import React from 'react';
import LifecycleDemo from './LifecycleDemo';

class LifecycleWrapper extends React.Component {

  constructor(){
    super();

    this.state = {
      text: '',
      showDemo: true
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange(event){
    this.setState({
      text: event.target.value
    });
  }

  handleClick(){
    this.setState({
      showDemo: !this.state.showDemo
    });
  }

  render(){
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
        <button onClick={this.handleClick}>Show/Hide child</button>
        {this.state.showDemo ? <LifecycleDemo text={this.state.text} onClose={this.handleClick} /> : null}
      </div>
    )
  }
}

export default LifecycleWrapper;