Summary - Props

Write a reusable button component using props.

Summary - Props

In this group you learned what props are, how to read them, the children prop, and default values. Now it's time to combine them.

The flow: you send the component a props object or values via destructuring, pass content with children, and give defaults for missing props. This way you write flexible, reusable components.

In the next step you'll write a reusable button component using props.

Exercise Reusable button

Complete the skeleton. Write a component called Button that takes ({ '{ label = "Gönder" }' }) as parameter and returns <button className="btn">{label}</button>. Don't forget to export.

Show example solution

function Button({ label = "Gönder" }) {
  return <button className="btn">{label}</button>;
}

export default Button;

Test yourself

What does destructuring do?
- Renders
- Stores state
- Updates DOM
- Reads props short
Show answer

Reads props short — Destructuring reads props short.
Match the props concepts

props

Data flow
destructuring

Short read
children

Content
default

Fallback

Next lesson: What is conditional rendering?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies