Axios Async Await

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="root"></div>

Babel + JSX

class App extends React.Component {
    state = {
        posts: [],
        isLoading: true,
        errors: null
    };

    /*   getPosts() {
        axios
          .get("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json")
          .then(response => {
            this.setState({
              posts: response.data.posts,
              isLoading: false
            });
          })
          .catch(error => this.setState({ error, isLoading: false }));
      } */
    async getPosts() {
        const response = await axios.get("https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/posts.json");
        try {
            this.setState({
                posts: response.data.posts,
                isLoading: false
            });
        } catch (error) {
            this.setState({ error, isLoading: false });
        }
    }

    componentDidMount() {
        this.getPosts();
    }

    render() {
        const { isLoading, posts } = this.state;
        return (
            <React.Fragment>
                <h2>Random Post</h2>
                <div>
                    {!isLoading ? (
                        posts.map(post => {
                            const { _id, title, content } = post;
                            return (
                                <div key={_id}>
                                    <h2>{title}</h2>
                                    <p>{content}</p>
                                    <hr />
                                </div>
                            );
                        })
                    ) : (
                        <p>Loading...</p>
                    )}
                </div>
            </React.Fragment>
        );
    }
}

ReactDOM.render(<App />, document.getElementById("root"));