users page

page-user.jsx

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom'

import classes from './page-user.module.css'

export const PageUser = () => {
  const { id } = useParams();
  const [ user, setUser ] = useState({});

  useEffect(() => {
    (async () => {
      const resp = await fetch('http://localhost:3000/users/' + id);
      const data = await resp.json();

      setUser(data);
    })();
  }, [id]);

  return (
    <ul>
      <li className={classes.item}>Name: { user?.firstname } { user?.lastname }</li>
      <li className={classes.item}>Email: { user?.email }</li>
      <li className={classes.item}>Company: { user?.company?.name }</li>
    </ul>
  )
}

page-users.jsx

import { useEffect, useState } from "react"

export const PageUsers = () => {
  const [ users, setUsers ] = useState([]);

  useEffect(() => {
    (async () => {
      const resp = await fetch('http://localhost:3000/users');
      const data = await resp.json();

      setUsers(data);
    })();
  }, []);

  const renderUser = (userData) => {
    const { lastname, firstname, email, phone, company } = userData;
    const fullName = firstname + ' ' + lastname;

    return (
      <tr>
        <td>{ fullName }</td>
        <td>{ email }</td>
        <td>{ phone }</td>
        <td>{ company?.name }</td>
      </tr>
    );
  }

  return (
    <>
      <h1>Пользователи</h1>
      <table>
        <tbody>
          { users.map(renderUser) }
        </tbody>
      </table>
    </>
  )
}