Commit e8e8ca86 authored by Kristian Freeman's avatar Kristian Freeman

Answer key - retrieve-data

parent b2a0fd92
......@@ -9,77 +9,42 @@ class NetworkedComponent extends React.Component {
constructor() {
super();
// Set this component's state:
// 1. `loading` should be `false`
// 2. `string` should be "n/a"
this.state = {
loading: false,
string: 'n/a'
}
}
componentDidMount() {
// When this component mounts, we should
// begin loading data.
// To begin, use this.setState to set `loading`
// to `true`.
// Remember that `this.setState` takes a JS object:
// this.setState({ key: 'value' })
this.setState({ loading: true })
// This does not need to be changed.
var url = 'https://bytesized-training-assets.herokuapp.com/exercise.json';
// `fetch` makes a HTTP request to the url, then...
fetch(url).then(resp => {
// With the response, we try and turn it into
// a JavaScript object from JSON, using .json(), then...
resp.json().then(json => {
// With the variable `json` that is provided as
// the result of `resp.json()`, update the component state,
// using this.setState below:
// - `loading` should be set to `false`
// - `string` should be set to the value of `json.string`:
// this is the value of the key `string` in the returned
// JSON.
this.setState({
loading: false,
string: json.string
})
});
});
}
render() {
// This does not need to be changed.
var loadingOrString;
// Get two values from state:
// - loading
// - string
// Set these values to a variable name of
// your choice below.
// When you've replaced both instances of UPDATE_ME
// in this render function, you can delete its
// definition below.
var UPDATE_ME;
const { loading, string } = this.state
// Replace UPDATE_ME with the variable you defined
// to store `this.state.loading`.
if (UPDATE_ME) {
// If we're still loading, we use
// this custom LoadingComponent.
// This does not need to be changed.
if (loading) {
loadingOrString = <LoadingComponent />;
} else {
// If we aren't loading, we should display
// the string value from state instead.
// This will contain the data requested
// from the network. Replace UPDATE_ME
// with the variable you defined to
// store this.state.string.
loadingOrString = <h3>{UPDATE_ME}</h3>;
loadingOrString = <h3>{string}</h3>;
}
// This does not need to be changed.
return <div>{loadingOrString}</div>;
}
}
// No changes are needed below this line.
class LoadingComponent extends React.Component {
render() {
return (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment