Multiple props
- React Native course
- Beginner
- Lesson 16/116
- 5 min
Learn to pass multiple props.
Multiple props
A component can take multiple props. During destructuring, props are separated by commas: function User({ name, age }) { ... }.
When calling, each prop is written as a separate attribute: <User name='Alex' age='25' />. The order of attributes does not matter.
This way, a single component is customized with rich data; for example, a user card can show both name and age.
Using two props
A component that can take multiple props can show richer content. For example, a User component can show both name and age: function User({ name, age }) { return <Text>{name}, {age}</Text>; }.
Call: <User name='Alex' age='25' />. The component receives both values and uses them in JSX.
This pattern is a structure you often see in real apps.
Practice Write a User component
Write a User component that takes name and age props via destructuring and returns <Text>{name}, {age}</Text>. App should call <User name='Alex' age='25' />.
Starter code
// Write User with name and age
// Call it in App
function App() {
return null;
}Sample solution
function User({ name, age }) {
return (
<Text>{name}, {age}</Text>
);
}
function App() {
return (
<User name='Alex' age='25' />
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How do you pass two props?
- <User name='Alex' age='25'>
- <User name='Alex', age='25' />
- <User name='Alex' age='25' /> Correct answer
- <User (name='Alex') (age='25') />
Explanation: Attributes are separated by spaces, no comma needed.
2 Two-prop destructuring
function User(____) { return <Text>{name}, {age}</Text>; }function User({ name, age }) { return <Text>{name}, {age}</Text>; }Explanation: Props are separated by commas.
3 Match the two-prop concepts
| Term | Meaning |
|---|---|
name |
Name |
age |
Age |
{ name, age } |
Two props |
<User ... /> |
Call |