Props

Props (short for "properties") are read-only inputs passed from a parent component to a child component. They allow components to be dynamic, reusable, and form a top-down (unidirectional) data flow.

On every re-render, a child component receives updated props from its parent. Props are immutable: a component must never modify its own props directly. By default, when a parent component re-renders, all of its child components re-render as well, even if their props have not changed.

Data Props

Values passed top-down (parent to child) for the child to render or consume. They carry primitive values, objects, arrays, or configurations.

// Child component receiving data props
export const Header = ({ content }) => {
    return (
        <h1>{content}</h1>
    );
};

// Parent passing data props
export const Page = () => {
    return (
        <Header content="Newsletter" />
    );
};

Children Prop

A built-in prop (children) automatically provided by React to pass JSX elements or components directly inside another component's opening and closing tags. Used for component composition and wrapper layouts.

// Child component wrapping nested content
export const Card = ({ children }) => {
    return (
        <div className="card">{children}</div>
    );
};

// Parent passing nested elements via children
export const Page = () => {
    return (
        <Card>
            <h1>Newsletter</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Card>
    );
};

Event Props (Callbacks)

Functions passed down to a child component, allowing it to communicate back to the parent when an action or event occurs. By convention, event props start with on (e.g., onClick, onChange), while the handler functions in the parent start with handle (e.g., handleClick, handleChange).

// Child component triggering the callback
export const Button = ({ onClick }) => {
    return (
        <button onClick={onClick}>Click!</button>
    );
};

// Parent component passing the event handler function
export const Panel = () => {
    const handleClick = (e) => {
        console.log(e.target.innerHTML); // Output: Click!
    };

    return (
        <Button onClick={handleClick} />
    );
};