Get jsonplaceholder data using axios in class component.

In this tutorial we are going to learn about how to get jsonplaceholder data using axios in class component.

First of all, create a constructor and define state variables, with an empty array .

constructor(props) {    super(props);      this.state = {      posts: []    };  }

For getting data or we can say for doing an api’s request like get , post, put, delete . We can use axios . axios is a javascript library which is used for interacting with backend or making requests from backend to front end.

Axios is an npm package we can install using this command npm i axios.

First we want to import axios for our program.

import axios from "axios";

For getting data from json we need to use lifecycle methods which is componentDidMount().

componentDidMount() {   axios.get(`https://jsonplaceholder.typicode.com/posts`).then((res) => {      const posts = res.data;      this.setState({ posts });    });  }

After using jsx inside the render method we can print all the data inside the placeholder by using map method.

render() {    return (      <div>        <h1> Example of React Axios Delete Request </h1>          <div></div>          <br />          <table className="table table-bordered">          <thead>            <tr>              <th>ID</th>              <th>Title</th>              <th>Body</th>              {/* <th>Action</th> */}            </tr>          </thead>            <tbody>            {this.state.posts.map((post) => (              <tr>                <td>{post.id}</td>                <td>{post.title}</td>                <td>{post.body}</td>                <td>                </td>              </tr>            ))}          </tbody>        </table>      </div>    );  } }

 Output:-

code link