Passing Props

Part of the Fundamentals section of Coddy's React journey — lesson 17 of 42.

Let's wire a prop end to end. Three steps, always the same:

// 1. receive it
function Greeting({ name }) {
    // 2. use it
    return <p>Hello, {name}!</p>;
}

// 3. pass it
<Greeting name="Ada" />

Strings are passed in quotes. Numbers and expressions use braces, the same rule as attributes:

<Score points={97} />

Challenge

Beginner

The Greeting component ignores everything you pass it.

Make Greeting receive a name prop and render Hello, {name}! in its paragraph.
In App, pass name="Ada" so the page shows Hello, Ada!.

Try it yourself

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Passing Props

All lessons in Fundamentals