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:
parent
0878ec9435
commit
8ea7aac4ed
33
src/App.tsx
33
src/App.tsx
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue