удалить элемент из dom в реакции, чтобы сделать кликабельный другой элемент z index

Question

В моем приложении есть заголовок div и alert div. Div оповещения имеет z-index из 2 для размещения на передней части заголовка, чтобы показывать уведомления внутри него.

Однако, это делает заголовок div неактивным. Div и заголовок и оповещения расположены абсолютно.

Оповещение накладывается справа от заголовка поверх него.

Новое в реакции. В angular можно было бы сделать с *ngIf (или) установить значение «Нет» в элементе оповещения div, когда длина массива уведомлений равна нулю или равна нулю.

Не уверен, как это сделать здесь.

index.jsx

    <div className={classname('aclass', 'bclass')}>
      <div classname={styles.notificationWrapper}>
        {this.notificationArray.map( (alert) => ( 
           <pxAlert 
              visible
              classes={classnames(style.aert, 'alert'}>
           </pxalert>
         )
        )}
      </div>

Answer 1

Это можно сделать с помощью встроенного , если с логическим оператором && :

    <div className={classname('aclass', 'bclass')}>
      <div classname={styles.notificationWrapper}>
        {this.notificationArray && this.notificationArray.map( (alert) => ( 
           <pxAlert 
              visible
              classes={classnames(style.aert, 'alert'}>
           </pxalert>
         )
        )}
      </div>

Надеюсь, это поможет,