#031 EXERCÍCIO DE LEITURA DE DADOS DE API NO USEEFFECT

App.jsx

import React, { useState, useEffect } from 'react'
import User from './components/User'
import './App.css'

export default function App(){
    // state
    const [users, setUsers] = useState([])

    // effect
    useEffect(() => {
        fetch("https://dummyjson.com/users")
        .then(response => response.json())
        .then(json => {
            setUsers(json.users)
        })
    }, [])

    return (
        <>
            <h1>Hello, World!!!</h1>
            {users.map(user => {
                return <User key={user.id} user={user}></User>
            })}
        </>
    )
}

User.jsx

import React from 'react'

export default function User({user}){
    return (
        <>
            <div className="user-container">
                Nome: <strong>{user.firstName} {user.lastName}</strong>
            </div>
        </>
    )
}

App.css

.user-container{
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: lightgray;
}