Props & Component Composition

What are components?

A component is a reusable, self-contained piece of UI — a function that returns JSX. You build an app by composing many small components together, which keeps each one simple and reusable.

Props: passing data in

Props (short for “properties”) are inputs you pass to a component, like arguments to a function. The parent decides the values; the child just displays them. Props are read-only — a child must never change its own props.

// child component receives props
function Greeting({ name, role }) {
  return (
    <View>
      <Text>{name}</Text>
      <Text>{role}</Text>
    </View>
  );
}

// parent passes props
<Greeting name="Anand" role="Developer" />

The { name, role } is destructuring — a clean way to pull the props you need out of the props object.

Passing functions as props (events)

To let a child tell the parent something happened (a tap), pass a function down as a prop. This is the standard way data flows back up.

function LikeButton({ onLike }) {
  return (
    <Pressable onPress={onLike}>
      <Text>Like</Text>
    </Pressable>
  );
}

// parent
<LikeButton onLike={() => console.log('liked!')} />

The children prop

A special prop, children, lets a component wrap whatever you put inside its tags — perfect for reusable containers like cards.

function Card({ children }) {
  return <View style={styles.card}>{children}</View>;
}

// usage
<Card>
  <Text>Anything can go inside</Text>
</Card>

Default props and TypeScript types

function Avatar({ size = 48, uri }) {     // default value
  return <Image source={{ uri }} style={{ width: size, height: size }} />;
}

With TypeScript you’d type the props, which prevents passing the wrong data and powers autocomplete.

Why composition beats big components

Small components are easier to read, test and reuse. Instead of one 300-line screen, you build <Header />, <UserList /> and <Footer /> and assemble them. This is the heart of the React mindset.

Common mistakes

• Trying to modify props inside a child (they’re read-only — use state instead).
• Forgetting to pass a required prop (the child renders empty or crashes).
• Building one giant component instead of composing small ones.

Summary: Components are reusable UI functions; props pass read-only data (and callback functions) from parent to child; children lets you build wrappers. Compose many small components instead of one large one.