React GET HTTP call using fetch library | Functional Component

GET CALL

fetch method returns a promise, which we access basically using then method. 

response.json() : converts the data into JSON


import React from "react";

const FetchApiGet = () => {
const [data, setData] = React.useState({});
const fetchApiData = () => {
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((json) => setData(json));
};

return (
<div>
<pre>{JSON.stringify(data, null, 2)}</pre>
<button className="btn btn-primary" onClick={fetchApiData}>
Fetch Data
</button>
</div>
);
};

export default FetchApiGet;

Comments

Post a Comment

Popular posts from this blog

React GET HTTP call using axios library | Functional Component

Image
React itself cannot perform the API calls, so it uses HTTP libraries for the same. Popular HTTP libraries are:  Axios & Fetch AXIOS Vs FETCH Axios  - By default works on JSON data.  - HTTP methods.  - only one .then method is there.  - better error handling mechanism.   AXIOS Axios is a promise-based library, so the promise must be handled. So we use `then` to handle the promise if it is fulfilled, and `catch` if it is rejected (aka, I get an error). `Then` is a callback function that automatically has the response object as an argument. That’s great for us because the data we’re retrieving will be inside that response object.  useEffect runs after the component is rendered . Adding the empty brackets [ ] as an argument is necessary so the code doesn’t run in an infinite loop. This second argument tells useEffect to only render if certain values have changed. We’re essentially telling useEffect to  only  run on render , because we’re pass...
Read more

Bootstrap With React

Image
 Go to BootStrap website:  Bootstrap Website  Copy the CSS part:    And paste it into your index.html file <!-- CSS only --> < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin = "anonymous" > Now you will be used to apply various styles using bootstrap classes.
Read more