Make a basic remote request for data.

This uses an example from https://www.codingthesmartway.com/how-to-fetch-api-data-with-react/
and a public data API.
This commit is contained in:
Eli Ribble 2024-08-27 08:23:58 -07:00
parent 0878ec9435
commit 8ea7aac4ed
1 changed files with 30 additions and 3 deletions

View File

@ -1,12 +1,39 @@
import './App.css';
import MailboxList from './Mailbox';
//import MailboxList from './Mailbox';
import React, { useEffect, useState } from 'react'
interface IUser {
name: string;
id: string;
}
const App = () => {
const [users, setUsers] = useState<Array<IUser>>([])
const fetchUserData = () => {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => {
return response.json()
})
.then(data => {
setUsers(data)
})
}
useEffect(() => {
fetchUserData()
}, [])
function App() {
return (
<div className="App">
<MailboxList></MailboxList>
{users.length > 0 && (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)}
</div>
);
}