example.md

class ActionSequence extends React.Component {
  state={
    remaining = 60,
    surname = "bond"
  }

  componentDidMount(){
    this.timer = 
      setInterval(() => {
        const remains = this.state.remaining -= 1
        if(remains == 0)
          this.cutTheDrama();
      }, 1000);
  }

  componentWillUnmount(){
    this.cutTheDrama()
  }

  cutTheDrama(){
    clearInterval(this.timer);
  }

  getSomebodyElse(){
    fetch("https://randomuser.me/api/")
    .then(res => res.json())
    .then(data => data.results[0])
    .then(recruit => {
      this.setState({surname: recruit.name.last})
    })
  }
  
  render () {
    const {surname, remaining} = this.state
    if(remaining == 0) {
      return <h1>🙀💥</h1>
    }
    return (
      <div>
        <div>Agent <b>{surname}</b> we need you to diffuse the bomb!</div>
        <div>
          If you can't diffuse it in {remaining} seconds, the cat may or may not die!
        </div>
        <div>
          But there is time! 
          <u onClick={this.getSomebodyElse}>
            Tap another agent
          </u> 
          if you think they can do it.
        </div>
      </div>
    )
  }
}