const rootElement = document.getElementById("root");

const Message = props => <div>{ props.children }</div>

class App extends React.Component {
  state = {
    cities: ["Montreal", "Toronto", "Vancouver"],
    index: undefined,
    count: 0
  }

  render() {
    const { cities, index, count } = this.state;
    return (
      <div>
        <Message>
          You will travel to: { cities[index] } <br />
          { count }
        </Message>
        <button onClick={
            (event) => {
              this.setState({
                index: Math.floor(Math.random()*cities.length)
              });
              this.setState((prevState) => ({
                  count: prevState.count + 1
              }));
            }
        }>
          Pick a city
        </button>
      </div>
    );
  }

}

ReactDOM.render(<App />, rootElement);