How To Perform GET HTTP Request in React’s Class Component With Fetch API

App.js

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => this.setState({ posts: data }))
      .catch((error) => console.log(error));
  }

  render() {
    const { posts } = this.state;
    return (
      <div className="posts-container">
        {posts.map((post) => {
          return (
            <div className="post-card" key={post.id}>
              <h2 className="post-title">{post.title}</h2>
              <p className="post-body">{post.body}</p>
              <div className="button">
                <div className="delete-btn">Delete</div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;