Skip to content

Instantly share code, notes, and snippets.

@zamfi

zamfi/cyoa-inputs.js

Created Nov 26, 2020
Embed
What would you like to do?
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment