What Are Props?

Reusing a component is nice, but three identical stars are only so useful. Props let you pass data into a component, so every copy can be different:

function Greeting({ name }) {
    return <p>Hello, {name}!</p>;
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

Two things happen here:

• Passing: props look like attributes: name="Ada"
• Receiving: the component unpacks them in its parameter list ({ name }) and uses them in JSX like any variable

Same component, different data, different output: Hello, Ada! and Hello, Alan!. Props are how parents configure their children.