Function Components and Props

A component is a function whose name starts with a capital letter and whose return value is JSX, null, a string, a number or an array of those. It receives exactly one argument, the props object, which is why almost every component starts by destructuring it. Props flow one way, parent to child, and the object is frozen: assigning to props.title throws. To change what a child shows, the parent re-renders it with new props.

Any JavaScript value can be a prop — a number, an object, a function, even another element. Defaults come from ES6 default parameters; defaultProps was removed for function components in React 19 7,897 and propTypes is now ignored, so type checking belongs to TypeScript (TypeScript).

Props, defaults, a function prop, and forwarding the restJavaScript

function Price({ amount, currency = 'USD' }) {          // default parameter
  return <b>{amount.toFixed(2)} {currency}</b>;
}
function Card({ title, footer, onPick, ...rest }) {     // rest goes to the <div>
  return (
    <div {...rest}>
      <h3>{title}</h3>{footer}
      <button onClick={() => onPick(title)}>Add to cart</button>
    </div>
  );
}
const app = (
  <Card title="Mechanical keyboard" data-sku="KB-01" className="card"
        footer={<p>Price: <Price amount={89.9} /></p>}
        onPick={name => console.log('picked', name)} />
);

Card never knows what footer contains; it only places it. That is React's composition model: pass elements as props instead of building inheritance hierarchies (Composition Versus Inheritance). The ...rest spread forwards className and data-sku to the <div>, which is how wrappers stay usable with arbitrary DOM attributes. Note onClick={() => onPick(title)} — an arrow that calls the handler. onClick={onPick(title)} would call it during render and pass the result, which is both wrong and impure (Pure Rendering).

MENU

Function Components and Props