cyoa-components.js

import React, { Component } from "react";

import "./styles.css";

class StartPage extends Component {
  render() {
    return <div>
        <p>Welcome, traveler! How would you like to get to your destination?</p>
        <button onClick={() => this.props.goToPage(TrainPage)}>Train</button>
        <button onClick={() => this.props.goToPage()}>Ship</button>
      </div>
  }
}
class TrainPage extends Component {
  render() {
    return <div>
      <p>Welcome aboard the choo-choo train! Please make your way to your seat. What's the number?</p>
      <button onClick={() => this.props.goToPage()}>12E</button>
      <button onClick={() => this.props.goToPage()}>97C</button>
    </div>
  }
}

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      page: StartPage
    };
  }

  goToPage(pageClass) {
    if (pageClass) {
      this.setState({
        page: pageClass
      });
    }
  }

  render() {
    let props = {
      goToPage: (page) => this.goToPage(page),
    }

    return <div className="App">
        <this.state.page {...props} />
      </div>
  }
}

export default App;