-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.jsx
55 lines (51 loc) · 1.8 KB
/
App.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React, { Component } from "react";
import "./App.css";
// This URL can be combined with an photo id to fetch an photo.
const PHOTO_URL = "https://picsum.photos/200?photo=";
// This URL can be used to get an array of objects that contain information
// about various photos.
const PHOTO_LIST_URL = "https://picsum.photos/list";
class App extends Component {
// 1. Declare a state object that will be used to track an array of photos
state = { photos: [] };
// 2. Declare a life cycle method
// This life cycle method should:
// - will be called after the component is initially rendered
// - will fetch an array of photos
// - will add that array of photos to state once received
componentDidMount() {
fetch(PHOTO_LIST_URL)
.then(res => res.json())
.then(photosArray => this.setState({ photos: photosArray }));
}
render() {
const { photos = [] } = this.state;
return (
<React.Fragment>
<header>
<h1>Photo Wall</h1>
<p>
Start by reading App.jsx and completing the numbered steps.
Afterward, delete this paragraph. Then, open up App.css and complete
the instructions there.
</p>
</header>
<div className="collage">
{/* We use map here because Array.prototype.map is an expression,
* and for loops are not. You'll learn more about this soon!
*/}
{photos.map(photo => (
<img
alt={/* 3. Fill me in with the photo's filename */ photo.filename}
key={/* 4. Fill me in with the photo's id */ photo.id}
src={
/* 5. Fill me in with the photo's URL */ PHOTO_URL + photo.id
}
/>
))}
</div>
</React.Fragment>
);
}
}
export default App;