17 HTTP Requests - biswajitsundara/react GitHub Wiki

Http GET Request

Using the fetch api we can pull the data and then render on the UI

  • We need to use the useEffect hook here to handle the api call.
  • We have passed an empty array to the useEffect hook so it will run only once.
import { useState, useEffect } from "react";

const GetList = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => setPosts(data))
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      <ul>
        {posts.map((post) => {
          return <li key={post.id}>{post.title}</li>;
        })}
      </ul>
    </div>
  );
};

export default GetList;

Http POST Request

import React, {useState} from 'react';

const PostBlog = () => {
  const [userId, setUserId] = useState("");
  const [title, setTitle] = useState("");
  const [body, setBody] = useState("");

  const submitHandler = (event) => {
    event.preventDefault();
    fetch("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      body: JSON.stringify({
        title: title,
        body: body,
        userId: userId,
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
      },
    })
      .then((response) => response.json())
      .then((json) => console.log(json));
  };

  return (
    <form onSubmit={submitHandler}>
      <input
        type="text"
        placeholder="UserId"
        value={userId}
        onChange={(event) => setUserId(event.target.value)}
      />
      <input
        type="text"
        placeholder="Title"
        value={title}
        onChange={(event) => setTitle(event.target.value)}
      />
      <input
        type="text"
        placeholder="Body"
        value={body}
        onChange={(event) => setBody(event.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default PostBlog;
⚠️ **GitHub.com Fallback** ⚠️