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
const Title = ({ content }) => {
    return (
        <h1>{content}</h1>
    );
};

// Parent passing data props
const Page = () => {
    return (
        <Title 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
const Section = ({ children }) => {
    return (
        <section>{children}</section>
    );
};

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

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
const Button = ({ onClick }) => {
    return (
        <button onClick={onClick}>Click!</button>
    );
};

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

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