Summary - Components
- React Native course
- Beginner
- Lesson 18/116
- 5 min
Combine props, children and reuse to write a card component.
Summary - Components
In this group you learned functional components, props, the children prop, taking multiple props, and component reuse.
You can now call a component with different props, write wrapper components, and use the same component in many places.
Let us combine all these concepts in a single app.
Practice Component with props
Write a Greeting component that takes the name prop via destructuring and returns <Text>Hello, {name}</Text>. App should call <Greeting name='Alex' />.
Starter code
// Write Greeting with name prop
// Call it in App
function App() {
return null;
}Sample solution
function Greeting({ name }) {
return (
<Text>Hello, {name}</Text>
);
}
function App() {
return (
<Greeting name='Alex' />
);
}Practice Two props and reuse
Write a User component that takes name and age props via destructuring and returns <Text>{name} - {age}</Text>. App should call it twice inside a <View>: <User name='Alex' age='25' /> and <User name='Ayşe' age='30' />.
Starter code
// Write User with name and age
// Call it twice in App
function App() {
return null;
}Sample solution
function User({ name, age }) {
return (
<Text>{name} - {age}</Text>
);
}
function App() {
return (
<View>
<User name='Alex' age='25' />
<User name='Ayşe' age='30' />
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the children prop do?
- Carries content between tags Correct answer
- Names the component
- Defines styles
- Hides the component
Explanation: children holds the content between opening and closing tags.
2 Match the component concepts
| Term | Meaning |
|---|---|
function |
Definition |
{ name } |
Destructuring |
children |
Content prop |
<User ... /> |
Call |