Отображение нового компонента в render

Есть alert. Он отображается когда значение переменной в store равно true. И исчезает, когда false.

 const alertElem = <div className="alert alert-danger alert-dismissible fade show"  role="alert">
                                        Введены некорректные данные
                                        <button type="button" className="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>;
   return (
       ...
           {this.props.loginResult ? alertElem : ''}
       ...
   )

У алерта есть крестик, с помощью которого можно его закрыть. Если он появился, закрываем его. И при следуюхих его вызовах его вообще не будет.

Как сделать что бы он при значении переменной равной true отображался новый, а не тож же (закрытый)?