1const { useState } = React
2
3const Card = props => {
4 return (
5 <div style={{ margin: '1em' }}>
6 <img alt="avatar" style={{ width: '70px' }} src={props.avatar_url} />
7 <div>
8 <div style={{ fontWeight: 'bold' }}>{props.name}</div>
9 <div>{props.blog}</div>
10 </div>
11 </div>
12 )
13}
14
15const CardList = props => <div>{props.cards.map(card => <Card {...card} />)}</div>
16
17const Form = props => {
18 const [username, setUsername] = useState('')
19
20 handleSubmit = event => {
21 event.preventDefault()
22
23 axios
24 .get(`https://api.github.com/users/${username}`)
25 .then(resp => {
26 props.onSubmit(resp.data)
27 setUsername('')
28 })
29 }
30
31 return (
32 <form onSubmit={handleSubmit}>
33 <input
34 type="text"
35 value={username}
36 onChange={event => setUsername(event.target.value)}
37 placeholder="GitHub username"
38 required
39 />
40 <button type="submit">Add card</button>
41 </form>
42 )
43}
44
45const App = () => {
46 const [cards, setCards] = useState([])
47
48 addNewCard = cardInfo => {
49 setCards(cards.concat(cardInfo))
50 }
51
52 return (
53 <div>
54 <Form onSubmit={addNewCard} />
55 <CardList cards={cards} />
56 </div>
57 )
58}
59
60ReactDOM.render(<App />, document.getElementById('app'))