Это один из тех случаев, когда использование хуков сделает синтаксис действительно лаконичным:

import React, { useState } from "react";
import ReactDOM from "react-dom";

const Test = () => {
  const [show, setShow] = useState(false)

  return (
    <div className="App">
      <button onClick={() => { setShow(true) }}>show the button</button>
      {
        show &&
        <Notification handleClick={() => { setShow(false) }}/>
      }
   </div>
  )
}

const Notification = ({handleClick}) => (
   <div className="test">
      <div>
         <button onClick={handleClick}>Card</button>
      </div>
   </div>
)

. /a/55673710/2417031.

Я пишу два тех решений, которые используют "открытое состояние и 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 метода жизненного цикла.

Вместо того, чтобы делать это усложнило, сохраните это простым и используйте toggleShow на родительском компоненте и только смонтируйтесь Notification, если шоу верно, передача в toggleShow от родителя как опоры, чтобы смочь переключить это от нашего дочернего компонента

class Test extends React.Component {
  constructor() {
    super();
    this.state = { show: false };
    this.toggleShow = this.toggleShow.bind(this);
  }

  toggleShow() {
    this.setState(prevState => ({ show: !prevState.show }));
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.toggleShow}>show the button</button>
        {this.state.show && <Notification hideNotification={this.toggleShow} />}
      </div>
    );
  }
}

const Notification = ({ hideNotification }) => (
  <div className="test">
    <div>
      <button onClick={hideNotification}>Card</button>
    </div>
  </div>
);