Summary - Props
- React course
- Beginner
- Lesson 21/84
- 5 min
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.
Practice 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.
Starter code
// Write the Button component hereSample solution
function Button({ label = "Gönder" }) {
return <button className="btn">{label}</button>;
}
export default Button;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does destructuring do?
- Renders
- Stores state
- Updates DOM
- Reads props short Correct answer
Explanation: Destructuring reads props short.
2 Match the props concepts
| Term | Meaning |
|---|---|
props |
Data flow |
destructuring |
Short read |
children |
Content |
default |
Fallback |