If you haven't one already, you can create react
application using create-react-app by running this command.
> create-react-app <YOUR_APP_NAME>
After successfully created app, create a file
fetchData in /src/fetchData.js.
About
useEffect() :
If you’re familiar with React class lifecycle
methods, you can think of useEffect Hook as componentDidMount,
componentDidUpdate, and componentWillUnmount combined. You should check out the docs.
Note
–
Inside the component where you want to fetch a
data, you must need to add a useEffect hook i.e.
import React, { useEffect } from "react"
export default () => {
useEffect(() => {
// Fetch data right here!
}, [])
return (
<>
<h1>You are welcome!</h1>
</>
)
}
As an Example, to load countries –
import React, { useEffect, useState } from 'react';
import axios from 'axios';
export default () => {
const [countries, setCountries] = useState([]);
const [load, setLoad] = useState(false);
const [error, setError] = useState('');
useEffect(() => {
axios.get('https://restcountries.eu/rest/v2/all')
.then(result => {
setCountries(result.data);
setLoad(true);
})
.catch(err => {
setError(err.message);
setLoad(true)
})
}, []);
if (load) {
return (<>
{error ?
<div>{error.message}</div> :
countries.map((val, i) => <div key={i}> {i} - {val.name}</div>)
}
</>)
} else {
return (
<>
Loading...
</>
);
}
};
The result looks like,
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
