Skip to content

Instantly share code, notes, and snippets.

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! 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment