Как оживить изменение состояния, сделанное React this.setState ({})?

Question

Я разыскиваю элемент DOM, который получает данные из локального состояния. При нажатии кнопки состояние изменяется с помощью this.setState ({}), и элемент DOM повторно отображает его. Как оживить это изменение состояния?

Git: https://github.com/TyroniUA/v.rudovtsymbalist-gmail.com

<StepsCard number='01' 
  id='number-one' 
  numberbckg='#00A9E7' 
  h2width={this.state.h2width[0].one} 
  h2={this.state.displayText[0].title} 
  p={this.state.displayText[0].text} />

<StepsCard 
  number='02' 
  id='number-two' 
  numberbckg='#B9D67B' 
  h2width={this.state.h2width[0].two} 
  h2={this.state.displayText[1].title} 
  p={this.state.displayText[1].text} />

Answer 1

Для этого можно использовать пакет react-transition-group. просто импортируйте TransictionGroup и CSSTransition из этого компонента и оберните ваш JSX, который вам нужен для анимации. Требуется ключ, на основе которого вам нужно анимировать, то есть состояние в вашем случае.

import { CSSTransition, TransitionGroup } from 'react-transition-group';

      <TransitionGroup>
        <CSSTransition key={this.state.value} timeout={1000} classNames="messageout">
         <YOURJSX/>
        </CSSTransition>
      </TransitionGroup>

Вот пример этого: https://codesandbox.io/s/nice-dubinsky-zmwpu