<main></main>

.trampoline {
  margin: 10px;
  font-size: 1.5em;
}

const produce = immer.produce;

class App extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      trampolines: [0, 3, 0, 1, -3],
      index: 0,
      rounds: 0,
    };
    this.inc = this.inc.bind(this);
  }
  
  inc() {
    this.setState(produce(draft => {
      if (draft.index < draft.trampolines.length) {
        draft.index += draft.trampolines[draft.index]++;
        draft.rounds++;
      }
    }));
  }
  
  render() {
    return (
      <div>
        <p>{this.state.rounds} Rounds so far</p>
        {
          this.state.trampolines.map((v, i) => (
            this.state.index === i ?
            <span className='trampoline'>({v})</span> :
            <span className='trampoline'>{v}</span>
          ))
        }
        <button onClick={this.inc}>Next</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('main'));