import './App.css';
//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()
  }, [])

  return (
    <div className="App">
      {users.length > 0 && (
        <ul>
	  {users.map(user => (
	    <li key={user.id}>{user.name}</li>
	    ))}
       </ul>
      )}
    </div>
  );
}

export default App;