Multiple props

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.

Exercise 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' />.

Show example solution

function User({ name, age }) {
  return (
    <Text>{name}, {age}</Text>
  );
}

function App() {
  return (
    <User name='Alex' age='25' />
  );
}

Test yourself

How do you pass two props?
- <User name='Alex' age='25'>
- <User name='Alex', age='25' />
- <User name='Alex' age='25' />
- <User (name='Alex') (age='25') />
Show answer

<User name='Alex' age='25' /> — Attributes are separated by spaces, no comma needed.

Two-prop destructuring

function User(____) { return <Text>{name}, {age}</Text>; }

Show answer

function User({ name, age }) { return <Text>{name}, {age}</Text>; }

Match the two-prop concepts

name

Name
age

Age
{ name, age }

Two props
<User ... />

Call

Next lesson: Component reuse

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies