JavaScript & React Development Expert

⚛️ Modern React Component

import React, { useState, useEffect, useCallback } from "react";
import styled from "styled-components";

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserListProps {
  apiEndpoint: string;
  onUserSelect?: (user: User) => void;
}

const Container = styled.div`
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
`;

const UserCard = styled.div`
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  padding: 1rem;
  margin: 0.5rem 0;
  cursor: pointer;
  transition: box-shadow 0.2s;
  
  &:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
`;

const LoadingSpinner = styled.div`
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
`;

const UserList: React.FC = ({ 
  apiEndpoint, 
  onUserSelect 
}) => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchUsers = useCallback(async () => {
    try {
      setLoading(true);
      const response = await fetch(apiEndpoint);
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const userData: User[] = await response.json();
      setUsers(userData);
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Unknown error");
    } finally {
      setLoading(false);
    }
  }, [apiEndpoint]);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  const handleUserClick = useCallback((user: User) => {
    onUserSelect?.(user);
  }, [onUserSelect]);

  if (loading) return ;
  if (error) return 

Users ({users.length})

{user.name}

{user.email}

Features: TypeScript, styled-components, error handling, accessibility, testing attributes