Skip to content

Instantly share code, notes, and snippets.

@johnloven
Last active March 16, 2018 18:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnloven/5d6a5b039c02f9fa9bc8a279f8595838 to your computer and use it in GitHub Desktop.
Save johnloven/5d6a5b039c02f9fa9bc8a279f8595838 to your computer and use it in GitHub Desktop.
class App extends React.Component {
render() {
return (
<div>
<DataContainer component={StudentPage} fetchData={() => fetch("myschool/student")}/>
<DataContainer component={OtherPage} fetchData={() => fetch("myschool/other")}/>
<DataContainer component={AndOtherPage} fetchData={() => fetch(("myschool/andanother")}/>
<div>
);
}
}
class DataContainer extends React.Component {
constructor(props) {
super(props);
this.state = { data: null };
}
componentDidMount() {
this.props.fetchData()
.then(response => response.json())
.then(json => this.setState({ data: json }))
}
render() {
const { component as Component } = this.props;
return <Component data={this.state.data}/>
}
}
class StudentPage extends React.Component {
render() {
return (
<div>
{this.props.data.map(student => <div>student.name</div>)}
</div>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment