TypeScript with React

// Props interface
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary";
  disabled?: boolean;
}

// Typed functional component
const Button: React.FC<ButtonProps> = ({ label, onClick, variant = "primary", disabled }) => {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  );
};

import { useState, useEffect, useRef } from 'react';

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

function UserList() {
  // Typed state
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(false); // inferred boolean

  // Typed ref
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    async function fetchUsers() {
      setLoading(true);
      const res = await fetch('/api/users');
      const data: User[] = await res.json();
      setUsers(data);
      setLoading(false);
    }
    fetchUsers();
  }, []);

  return <div>{users.map(u => <p key={u.id}>{u.name}</p>)}</div>;
}

function SearchForm() {
  const [query, setQuery] = useState('');

  // Typed event handler
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log('Searching:', query);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={query} onChange={handleChange} />
      <button type="submit">Search</button>
    </form>
  );
}