React 19 + TS: Components and Props

"A React component is a function that takes props and returns JSX. TypeScript makes that contract explicit."

Typing functional components

The modern convention is to declare a Props type and use it as the function parameter. function Button(props: ButtonProps): React.ReactNode { ... }. The return type is usually inferred as React.ReactNode (or JSX.Element in older React types) — annotating it explicitly is optional but helpful for documentation.

React.FC<Props> is still a valid option, not a forbidden legacy API. Since the React 18 type updates it no longer adds children implicitly, so either style must list children in Props when the component accepts them. Directly annotating the function parameter is often simpler, especially for generic components; choose one style deliberately and keep the actual Props contract explicit.

Children typing

If your component accepts children, include them in Props: interface ButtonProps { children: React.ReactNode; onClick?: () => void }. React.ReactNode covers anything React can render — strings, numbers, elements, fragments, arrays, null. For specific types of children (e.g., 'only function children'), use a narrower type.

Event handler typing

React event handlers have specific types: onClick: (e: React.MouseEvent<HTMLButtonElement>) => void. The generic parameter is the element. Inline handlers usually let inference do the work — <button onClick={(e) => ...}> infers e correctly from the JSX context.

React + TS is mostly about typing Props and event handlers cleanly. The rest is just JavaScript with types.

Code

Component with Props, children, and event handlers·tsx

import { useState } from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
  children?: React.ReactNode;
}

export function Button({ label, onClick, variant = 'primary', disabled, children }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled} className={`btn btn-${variant}`}>
      {label}
      {children}
    </button>
  );
}

// Event handlers — inline inferred.
function Form() {
  const [value, setValue] = useState('');
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}    // e: React.ChangeEvent<HTMLInputElement>
    />
  );
}

Exercise

Write a Card component with title: string, optional description?: string, and actions?: React.ReactNode for child action buttons. Use it in a parent component, passing actions as JSX children. Confirm the types work in both component definitions and the consumer.

Hint

interface CardProps { title: string; description?: string; actions?: React.ReactNode }. Then <Card title="..." actions={<Button ... />} />.

Typing functional components

Children typing

Event handler typing

Code

External links

Exercise

Progress

Comments 0