{"id":55758,"date":"2022-11-11T15:23:15","date_gmt":"2022-11-11T09:53:15","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=55758"},"modified":"2022-11-11T15:23:15","modified_gmt":"2022-11-11T09:53:15","slug":"how-to-fetch-api-data-in-reactjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/how-to-fetch-api-data-in-reactjs\/","title":{"rendered":"How to fetch API data in ReactJS ?"},"content":{"rendered":"

We can fetch data by using the Javascript fetch() method. The Fetch API is a new standard to server requests with Promises, it also includes additional features. This blog will help you understand the implementation of fetch API in both functional and class components by walking through each one with sample code. Let\u2019s start –<\/p>\n

Consider the below object as a sample response from API:<\/strong><\/h2>\n
{\r\ndata: [\r\n{ \"title\": \"Di\", \"date\": \"22 Oct 2022\" },\r\n{ \"title\": \"Diii\", \"date\": \"23 Oct 2022\" }\r\n]\r\n}<\/pre>\n
For Functional Component:<\/h2>\n
Below are the simple steps –<\/p>\n
Step 1<\/strong>
\nImport useState & useEffect<\/p>\n
Step 2<\/strong>
\ndefine state variables to store the API response using useState method.<\/p>\n
Step 3<\/strong>
\nIn the last step, call the API in the useEffect method.<\/p>\n
Below is an example<\/strong>:<\/p>\n
import React, { useState, useEffect } from \"react\";<\/span>\r\n\r\nconst App = () => {<\/span>\r\nconst [data, setData] = useState([]);<\/span>\r\nuseEffect(() => {<\/span>\r\n \u00a0\u00a0\u00a0fetch(\"https:\/\/apidata.com\")<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0.then(res => res.json())<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0.then(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(result) => {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setData(result);<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0)<\/span>\r\n}, []);<\/span>\r\nreturn (<\/span>\r\n \u00a0\u00a0\u00a0<div className=\u201dlist\u201d><\/span>\r\n \u00a0\u00a0\u00a0{data.map((item,index) => (<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div key={index}><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{item.title} {item.date}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div><\/span>\r\n \u00a0\u00a0\u00a0))}<\/span>\r\n \u00a0\u00a0\u00a0<\/div><\/span>\r\n);<\/span>\r\n};<\/span>\r\nexport default App;<\/span><\/pre>\n
For Class Component:<\/h2>\n
Step 1<\/strong>
\nImport Component<\/p>\n
Step 2<\/strong>
\ndefine state inside the class constructor<\/p>\n
Step 3<\/strong>
\nIn the last step call the API inside componentDidMount method.<\/p>\n
Below is an example:<\/strong><\/p>\n
import React, { Component } from \"react\";<\/span>\r\n\r\nclass App extends Component {<\/span>\r\n \u00a0\u00a0\u00a0constructor(props) {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0super(props);<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0this.state = {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: []<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0};<\/span>\r\n \u00a0\u00a0\u00a0}<\/span>\r\n  \u00a0\u00a0\u00a0componentDidMount() {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0fetch(\"https:\/\/apidata.com\")<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then(res => res.json())<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0(result) => {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.setState({<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: result.data<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0)<\/span>\r\n \u00a0\u00a0\u00a0}<\/span>\r\n \u00a0\u00a0\u00a0render() {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0const { data } = this.state;<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0return (<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div className=\u201dlist\u201d><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{data.map((item,index) => (<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div key={index}><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{item.title} {item.date}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0))}<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div><\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0);<\/span>\r\n \u00a0\u00a0\u00a0}<\/span>\r\n \u00a0}<\/span>\r\n \u00a0export default App;<\/span><\/pre>\n
<\/div>","protected":false},"excerpt":{"rendered":"
We can fetch data by using the Javascript fetch() method. The Fetch API is a new standard to server requests with Promises, it also includes additional features. This blog will help you understand the implementation of fetch API in both functional and class components by walking through each one with sample code. Let\u2019s start – […]<\/p>\n","protected":false},"author":228,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":4,"footnotes":""},"categories":[3429],"tags":[4842,4064],"class_list":["post-55758","post","type-post","status-publish","format-standard","hentry","category-front-end-development","tag-html","tag-react"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t