Scribd
Upload
11 views3 pages

List Rendering and Axios

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
11 views3 pages

List Rendering and Axios

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
You are on page 1/ 3

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.

App.jsx

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 axios.post(), axios.put(), axios.delete(), etc., similarly to
how we used axios.get().
 Axios returns a promise, so we need to resolve that.
Ex :
App.jsx
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 axios.get("https://api.github.com/users");
setState(data)

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

return (
<section>
<article>
{state.map((x) => {
return (
<ul key={x.id}>
<li>{x.login}</li>
<li>{x.id}</li>
<li>
<img src={x.avatar_url} alt="" />
</li>
</ul>
)
})}
</article>
</section>
)
}

export default App

You might also like