using componentdidmount with fetch

1Component with Data
2class App extends React.Component {
3  constructor(props) {
4    super(props);
5    this.state = {
6      items: [],
7      isLoaded: false,
8    };
9  }
10
11  componentDidMount() {
12    fetch('https://jsonplaceholder.typicode.com/posts')
13      .then(res => res.json())
14      .then(result => {
15        this.setState({
16          isLoaded: true,
17          items: result
18        });
19      });
20  }
21
22  render() {
23    const { items } = this.state;
24    if (!isLoaded) {
25      return <div>Loading ... </div>;
26    } else {
27      return (
28        <ul>
29          {items.map(item => (
30            <li key={item.id}>
31              <h3>{item.title}</h3>
32              <p>{item.body}</p>
33            </li>
34          ))}
35        </ul>
36      );
37    }
38  }
39}
40Fetching Data - Ha

1import React, { Component } from 'react';
2class App extends Component {
3  constructor(props) {
4    super(props);
5    this.state = {
6      data: null,
7    };
8  }
9  componentDidMount() {
10    fetch('https://api.mydomain.com')
11      .then(response => response.json())
12      .then(data => this.setState({ data }));
13  }
14  ...
15}
16export default App;
17