TypeScript - JSX & React Basics

Typing props

type ButtonProps = { onClick?: () => void; children: React.ReactNode };

function Button({ onClick, children }: ButtonProps) {
  return {children};
}

State and events

import { useState } from 'react';

function Counter() {
  const [n, setN] = useState(0);
  return  setN(n+1)}>Count: {n};
}

Generic components

type ListProps = { items: T[]; render: (t: T) => React.ReactNode };

function List({ items, render }: ListProps) {
  return 
{items.map((i, idx) => 
{render(i)}
)}
;
}

Ensure tsconfig has "jsx": "react-jsx" and React types installed.