React Fetch JSON and return markup value example

gistfile1.tsx

// Welcome to Code in Framer
// Get Started: https://www.framer.com/docs/guides/

import React, { useEffect, useState } from "react"

const Card = (props) => {
    const { user } = props

    return (
        <div>
            <div style={{ color: "red" }}>
                {user.name.title} {user.name.first} {user.name.last}
            </div>
            <hr />
        </div>
    )
}

export default function DNetwork() {
    const [users, setUsers] = useState([])

    useEffect(() => {
        const url = "https://randomuser.me/api/?results=5"

        const fetchData = async () => {
            try {
                const response = await fetch(url)
                const json = await response.json()
                const { results } = json
                // Only put the results in state, ie, the actual users array
                setUsers(results)
            } catch (error) {
                console.log("error", error)
            }
        }

        fetchData()
    }, [])

    return (
        <div>
            {users.map((user) => (
                <Card key={user.email} user={user} />
            ))}
        </div>
    )
}