Menu

Tech

English

Step 2: Card with Props

Part of the Fundamentals section of Coddy's React journey. Lesson 40 of 42.

Challenge

Easy

Make the card reusable.

Define ProfileCard receiving name and bio props, rendering the same structure as step 1 (card div, id="profile-name", id="profile-bio") with the prop values.
In App, render one ProfileCard with name Grace Hopper and bio Invented the compiler.

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>

All lessons in Fundamentals

1Meet React

What Is React?Your First Component One Parent Rule JSX Is Not HTML Recap: Meet React

4Props

What Are Props?Passing Props Two Props Same Component, New Data The Children Prop Recap: Props

7Conditions & Lists

Ternary Rendering Show with &&Render a List Keys Matter Filter, Then Map Recap: Conditions & Lists

2JSX Expressions

Curly Braces Math in Braces Braces in Attributes Calling Functions in JSX Recap: JSX Expressions

5State & Events

What Is State?Click Counter Count in Steps Toggle with State Independent State Recap: State & Events

8Project: Profile Card

Step 1: Card StructureStep 2: Card with PropsStep 3: Like Button Step 4: Follow Toggle

3Components

Building Blocks Your Second Component Reuse Components Compose a Page Recap: Components

6Forms & Inputs

Controlled Inputs Echo the Input Character Counter Clear Button Recap: Forms & Inputs