react full notes

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'))