{"id":1969,"date":"2021-02-09T12:00:00","date_gmt":"2021-02-09T11:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/how-to-make-rest-api-calls-in-react-get-post-put-delete\/"},"modified":"2026-07-05T03:25:21","modified_gmt":"2026-07-05T01:25:21","slug":"how-to-make-rest-api-calls-in-react-get-post-put-delete","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/how-to-make-rest-api-calls-in-react-get-post-put-delete\/","title":{"rendered":"How to Make REST API Calls in React \u2013 GET, POST, PUT, DELETE"},"content":{"rendered":"

In this tutorial, you will learn how to make REST API calls in React. We would cover this step by step with all the code snippets provided here. So let’s get started!<\/p>\n

We would make a REST API call to retrieve a list of posts from the url: https:\/\/jsonplaceholder.typicode.com\/posts<\/a><\/p>\n

    \n
  1. Making HTTP GET Request<\/a><\/li>\n
  2. Making HTTP POST Request<\/a><\/li>\n<\/ol>\n

     <\/p>\n

    1. Making HTTP GET Request<\/strong><\/h4>\n

    To make a POST request, we would need the axios package. So follow the steps below<\/p>\n

    Step 1<\/strong> – Install the axios package using the command<\/p>\n

    npm install axios --save\r\n<\/pre>\n
     <\/p>\n
    Step 2<\/strong> – Create the PostList component. This would be used to display the list of posts. It would be a class component.<\/p>\n
    Step 3<\/strong> – Add the import statement to import axios to this component<\/p>\n
    import axios from 'axios'\r\n<\/pre>\n
     <\/p>\n
    Step 4<\/strong> – Add the constructor. Then add a state variable: postList. Initialize it to empty list<\/p>\n
    Step 5<\/strong> – You now need to write the code for the API call in the componentDidMount() lifecycle method. The code is given below:
    \n<\/p>\n
    componentDidMount(){\r\n    axios.get('https:\/\/jsonplaceholder.typicode.com\/posts'<\/span>)\r\n    .then(response =><\/span> {\r\n        this<\/span>.setState({postList:<\/span> response.data})\r\n    })\r\n    .catch<\/span>(error =><\/span> {\r\n        console.log(error)\r\n    })\r\n}\r\n<\/pre>\n
     <\/p>\n
    Step 6<\/strong> – In the render method, write the code to map over the postList and display the title and body of the posts. I’m placing the complete render() method below.
    \n<\/p>\n
    render() {\r\n    const<\/span> {postList} =<\/span> this<\/span>.state\r\n    return<\/span> (\r\n        <<\/span>div><\/span>\r\n            {\r\n                postsList.length ?<\/span>\r\n                postList.map(post =><\/span> <div key=<\/span>{post.id}><\/span>{post.title}<<\/span>\/div>)\r\n                :<\/span>\r\n                null<\/span>\r\n            }\r\n        <\/div>\r\n    )\r\n}\r\n<\/pre>\n
    Note<\/strong>: We destructure the postList and we also check if the returned list is empty<\/p>\n
    At this point, you can test the application. You’ll see a list of post displayed.<\/p>\n
     <\/p>\n
    2. Making a POST Request<\/strong><\/h4>\n
    We would create a form with three fields: userId, title and body. These would be wrapped in a <form> tag with a submit button. Follow the steps below:<\/p>\n
    Step 1<\/strong> – Create the PostForm component and import the axios package. This would be a class component<\/p>\n
    Step 2<\/strong> – Add the constructor and add the three states initialized to empty string.<\/p>\n
    Step 3<\/strong> – In the render method, create the form with the three input fields. To make it easier for you, I’m providing the complete render method below:<\/p>\n
    render() {\r\n    const {userId, title, body} = this.state\r\n    return (\r\n        <div><\/span>\r\n            <form<\/span> onSubmit=<\/span>{this.submitHandler}<\/span>><\/span>\r\n            <div><\/span>\r\n                <input<\/span> \r\n                type=<\/span>'text'<\/span> \r\n                name =<\/span>'userId'<\/span> \r\n                onChange=<\/span>{this.changeHandler}<\/span>\r\n                value=<\/span>{userId}<\/span>><\/input><\/span>\r\n            <\/div><\/span>\r\n            <div><\/span>\r\n                <input<\/span> \r\n                type=<\/span>'text'<\/span> \r\n                name =<\/span>'title'<\/span> \r\n                    onChange=<\/span>{this.changeHandler}<\/span>\r\n                value=<\/span>{title}<\/span>><\/input><\/span>\r\n            <\/div><\/span>\r\n            <div><\/span>\r\n                <input<\/span> \r\n                type=<\/span>'text'<\/span> \r\n                name =<\/span>'body'<\/span> \r\n                onChange=<\/span>{this.changeHandler}<\/span>\r\n                value=<\/span>{body}<\/span>><\/input><\/span>\r\n            <\/div><\/span>\r\n            <button<\/span> type=<\/span>'submit'<\/span>><\/span>Submit Now<\/button><\/span>\r\n            <\/form><\/span>\r\n        <\/div><\/span>\r\n    )\r\n}\r\n<\/pre>\n
    Note: Feel free to add labels to the input fields<\/p>\n
    Step 4<\/strong> – Add the changeHandler method to handle when the text input changes<\/p>\n
    changeHandler=<\/span>(e)  =><\/span>{\r\n    this<\/span>.setState({\r\n        [e.target.name]:<\/span> e.target.value\r\n    })\r\n}\r\n<\/pre>\n
    Note that we are using the same changeHandler for all the inputs. However, the name and value would vary depending on the input<\/p>\n
    Step 5<\/strong> – Add the submitHandler to submit the form.<\/p>\n
    submitHandler =<\/span> (e) =><\/span> {\r\n    e.preventDefault()\r\n    axios.post('https:\/\/jsonplaceholder.typicode.com\/posts'<\/span>, this<\/span>.state)\r\n    .then(response =><\/span> {\r\n        console.log(response)\r\n    })\r\n}\r\n<\/pre>\n
     <\/p>\n
    Step 6<\/strong> – Add the PostForm to the App component and test the application. You will see the form displayed as shown below:<\/p>\n
    \"React<\/a>
    React Input Form<\/figcaption><\/figure>\n
    Step 7<\/strong> – Fill the form and submit. Then check the console. You will see the newly submitted record with a new id<\/p>\n
     <\/p>\n
    Homework<\/strong><\/p>\n
    As a homework, please enhance the PostForm using Bootstrap. Find my steps on how to style with Bootstrap here<\/a>.<\/p>\n
    See my video tutorial on How to Make REST API Calls.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    In this tutorial, you will learn how to make REST API calls in React. We would cover this step by step with all the code … <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[289],"tags":[],"class_list":["post-1969","post","type-post","status-publish","format-standard","hentry","category-rest-web-services"],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=1969"}],"version-history":[{"count":1,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1969\/revisions"}],"predecessor-version":[{"id":2137,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/1969\/revisions\/2137"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=1969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=1969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=1969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}