cyoa-inputs.js

import React, { Component } from "react";

import "./styles.css";

class StartPage extends Component {
  render() {
    return (
      <div>
        <p>Welcome, traveler! What is your name?</p>
        <input
          type="text"
          value={this.props.getData("name")}
          onChange={(event) => this.props.setData("name", event.target.value)}
        />
        <p>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, {this.props.getData("name")}!
          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 = {
      getData: (key) => this.state["data_" + key],
      setData: (key, value) => this.setState({ ["data_" + key]: value }),
      goToPage: (page) => this.goToPage(page)
    };

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

export default App;