TypeScript with React

1type Props = { title: string; count?: number; children?: React.ReactNode };
2

3function Panel({ title, count = 0, children }: Props) {
4  const [open, setOpen] = useState<boolean>(true);
5  return <section><h2>{title} ({count})</h2>{open && children}</section>;
6}

1import { useState, type ChangeEvent, type FormEvent, type ReactNode } from 'react';
2

3type Product = { id: number; name: string; price: number; category: 'Stationery' | 'Bags' };
4

5type ListProps<T> = {
6  items: T[];
7  getKey: (item: T) => string | number;
8  render: (item: T) => ReactNode;
9  empty?: string;
10};
11

12function List<T>({ items, getKey, render, empty = 'Nothing to show' }: ListProps<T>) {
13  if (items.length === 0) return <p>{empty}</p>;
14  return <ul>{items.map(item => <li key={getKey(item)}>{render(item)}</li>)}</ul>;
15}
16

17type PickerProps = { products: Product[]; onPick: (product: Product) => void };
18

19function ProductPicker({ products, onPick }: PickerProps) {
20  const [query, setQuery] = useState('');                      // inferred as string
21  const [picked, setPicked] = useState<Product | null>(null);  // explicit: starts null
22

23  const handleChange = (e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value);
24

25  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
26    e.preventDefault();
27    const match = products.find(p => p.name.toLowerCase() === query.toLowerCase());
28    if (match) { setPicked(match); onPick(match); }
29  };
30

31  const visible = products.filter(p => p.name.toLowerCase().includes(query.toLowerCase()));
32

33  return (
34    <form onSubmit={handleSubmit}>
35      <input value={query} onChange={handleChange} aria-label="Product" />
36      <List items={visible} getKey={p => p.id} render={p => `${p.name} — ₹${p.price}`} />
37      {picked && <p>Picked: {picked.name} ({picked.category})</p>}
38    </form>
39  );
40}
41

42export default function App() {
43  const products: Product[] = [
44    { id: 1, name: 'Pen', price: 20, category: 'Stationery' },
45    { id: 2, name: 'Backpack', price: 1200, category: 'Bags' },
46  ];
47  return <ProductPicker products={products} onPick={p => console.log('picked', p.id)} />;
48}

Renders an input and the list “Pen — ₹20”, “Backpack — ₹1200”. Typing “pen” and pressing Enter shows “Picked: Pen (Stationery)”. In the editor, writing category: "Toys", forgetting the onPick prop, or calling p.prize all show TypeScript errors before the code runs.