Я пишу два тех решений, которые используют "открытое состояние и getDerivedStateFromProps метод жизненного цикла" и другой, который не использует "открытое состояние и getDerivedStateFromProps метод жизненного цикла".

Решение 1 (С открытым состоянием и getDerivedStateFromProps):

class Test extends Component {
  state ={
      show: false
  }

  constructor(props) {
    super(props);
    this.closeShow = this.closeShow.bind(this);
  }

  show(){
      this.setState({show: true})
  }



  render() {
      return (
          <div className="App">
              <button onClick={this.show.bind(this)}>show the button</button>
              {this.state.show && <Notification show={true} onClose={this.closeShow}  />}
          </div>
      )
  }

  closeShow(e) {
    e.preventDefault();
    this.setState({show:false});
  }
}

и Компонент Уведомления как:

class Notification extends Component {
  constructor(props){
        super(props);
        this.state ={
            open: true
        }
    }

    static getDerivedStateFromProps(nextProps, prevState){
        if (nextProps.show !== prevState.open) {
          return {open: nextProps.show};
        }
        return null;

    }

    render(){
        const {onClose} = this.props;
        if(!this.state.open){
            return null
        }

      return (
          <div className="test">
              <div>
                  <button onClick={onClose}>Card</button>
              </div>
          </div>
      )
  }

}

Решение 2 (Без открытого состояния и getDerivedStateFromProps)

Только компонент Уведомления требует изменения как показано:

class Notification extends Component {


    render(){
        const {show, onClose} = this.props;
        if(!show){
            return null
        }

      return (
          <div className="test">
              <div>
                  <button onClick={onClose}>Card</button>
              </div>
          </div>
      )
  }

}

С Решением 2 мы можем использовать компонент не сохраняющий состояние, поскольку нет никакого состояния для управления и рендеринг компонентов не сохраняющий состояние быстро, как выдерживают сравнение с компонентами с сохранением информации. Код для компонента не сохраняющего состояние как:

const Notification = function(props) {

        const {show, onClose} = props;
        if(!show){
            return null
        }

      return (
          <div className="test">
              <div>
                  <button onClick={onClose}>Card</button>
              </div>
          </div>
      )
}

лучше следовать за 2-м решением как, когда состояние показа нажимает кнопку, управляется от Тестовой "выставочной" переменной состояния компонента тогда, скрыть состоянием кнопки щелчка нужно также управлять от Тестовой "выставочной" переменной состояния компонента.

я дал решение 1 только, чтобы иметь понимание getDerivedStateFromProps метода жизненного цикла.