Scribd
Upload
70 views3 pages

Axios Methods in React Applications

The document explains how to render lists in React using the map() function to create React elements from an array. It also introduces Axios, a JavaScript library for making HTTP requests, commonly used in React applications to interact with APIs. An example code snippet demonstrates fetching user data from the GitHub API and rendering it in a list format within a React component.

Uploaded by

gagangk8822
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
70 views3 pages

Axios Methods in React Applications

The document explains how to render lists in React using the map() function to create React elements from an array. It also introduces Axios, a JavaScript library for making HTTP requests, commonly used in React applications to interact with APIs. An example code snippet demonstrates fetching user data from the GitHub API and rendering it in a list format within a React component.

Uploaded by

gagangk8822
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

List rendering :

 In React, rendering lists is a common task. You can render lists using
JavaScript's map() function to iterate over an array of data and return an
array of React elements.

[Link]

Axios :
 Axios is a popular JavaScript library that allows you to make HTTP
requests from a browser.
 It's often used in React applications to interact with APIs or to
send/receive data.
 Axios supports other HTTP methods like POST, PUT, DELETE, etc.
You can use [Link](), [Link](), [Link](), etc., similarly to
how we used [Link]().
 Axios returns a promise, so we need to resolve that.
Ex :
[Link]
import React from 'react'
import axios from "axios"
import { useEffect } from 'react'
import { useState } from 'react'
const App = () => {

let [state, setState] = useState([])

let getApi = async () => {


let {data} = await [Link]("[Link]
setState(data)

useEffect(() => {
getApi()
},[])

return (
<section>
<article>
{[Link]((x) => {
return (
<ul key={[Link]}>
<li>{[Link]}</li>
<li>{[Link]}</li>
<li>
<img src={x.avatar_url} alt="" />
</li>
</ul>
)
})}
</article>
</section>
)
}

export default App

You might also like