Skip to main content
React Native Introduction
CHAPTER 07 Beginner

Functional Components and Props

Updated: May 16, 2026
6 min read

# CHAPTER 7

Functional Components and Props

1. Introduction

Imagine building an app like Instagram. The feed contains 100 posts. You are not going to write the code for a "Post Box" 100 separate times. You are going to write it once, and reuse it 100 times. But how does that generic Post Box know whether to display Alice's photo or Bob's photo? The answer is Props. In this chapter, we will master Functional Components and Props. We will learn how to make our components dynamic by passing "Properties" (data) down from Parent components to Child components, allowing us to build highly reusable, dynamic UI architectures.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Understand the definition and strict rules of Props.
  • Pass simple strings and numbers to child components.
  • Access received props within a child component.
  • Utilize Object Destructuring for cleaner prop extraction.
  • Render dynamic UI elements based on prop data.

3. What are Props?

Props (short for Properties) are arguments passed into React components. Think of a function: function multiply(a, b). The arguments a and b dictate how the function behaves. Props work exactly the same way. The parent component passes data, and the child component uses that data to render the UI.

The Golden Rule: Props are READ-ONLY. A child component can *never* modify the props it receives. Data flows exactly one way: Downwards.

4. Passing and Receiving Props

Let's build a reusable Greeting component.

1. The Parent (Passing Data) The parent uses custom HTML-like attributes to pass data. We can name these attributes anything we want!

javascript
12345678910111213 
import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting'; // Assuming it's in another file

export default function App() {
  return (
    <View>
      {/* Passing a prop named 'name' to the child */}
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </View>
  );
}

2. The Child (Receiving Data) The child receives an object called props. It contains all the data the parent passed down!

javascript
1234567 
import React from &#039;react&#039;;
import { Text } from &#039;react-native&#039;;

export default function Greeting(props) {
  // We use curly braces to inject the prop into the UI
  return <Text>Hello, {props.name}!</Text>;
}

*Output on screen: "Hello, Alice!" followed by "Hello, Bob!"*

5. Passing Numbers, Booleans, and Variables

If you pass a hardcoded string, you use quotes: name="Alice". If you pass a number, a boolean, or a variable, you MUST wrap it in curly braces {} so JSX knows it is JavaScript math/logic!
javascript
12345678910111213141516 
function App() {
  const dynamicUser = "Charlie";

  return (
    <View>
      {/* Number (Requires braces) */}
      <ScoreCard score={100} /> 
      
      {/* Boolean (Requires braces) */}
      <ProfileCard isAdmin={true} /> 
      
      {/* Variable (Requires braces) */}
      <Greeting name={dynamicUser} /> 
    </View>
  );
}

6. Destructuring Props (The Professional Way)

Writing props.name, props.age, props.city over and over gets tedious. Modern React developers use JavaScript Object Destructuring to extract the variables directly in the function parameters!
javascript
123456789101112 
// Old Way: function UserCard(props) { return <Text>{props.name}</Text>; }

// Professional Way: Unpack the object immediately!
export default function UserCard({ name, age, city }) {
  return (
    <View>
      <Text>Name: {name}</Text>
      <Text>Age: {age}</Text>
      <Text>Location: {city}</Text>
    </View>
  );
}

7. Default Props

What happens if the parent forgets to pass the name prop? The screen will show "Name: " (blank). To prevent this, you can assign default values during destructuring!
javascript
1234 
// If 'name' is not provided, default to "Guest"
export default function UserCard({ name = "Guest" }) {
  return <Text>Welcome, {name}</Text>;
}

8. Mini Project: User Profile Card App

Objective: Build a dynamic feed using reusable components.
javascript
12345678910111213141516171819202122232425262728293031 
import React from &#039;react&#039;;
import { View, Text, StyleSheet } from &#039;react-native&#039;;

// 1. The Reusable Child Component
const ProfileCard = ({ username, job, isPro }) => {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>{username}</Text>
      <Text>{job}</Text>
      {/* Using a Ternary Operator to show "Pro" if isPro is true! */}
      <Text>{isPro ? "PRO MEMBER" : "Standard Member"}</Text>
    </View>
  );
};

// 2. The Parent Component
export default function App() {
  return (
    <View style={styles.container}>
      {/* Reusing the same component with different data! */}
      <ProfileCard username="Sarah" job="Designer" isPro={true} />
      <ProfileCard username="Mike" job="Developer" isPro={false} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 50 },
  card: { padding: 20, marginBottom: 10, backgroundColor: &#039;#eee&#039; },
  title: { fontWeight: &#039;bold&#039;, fontSize: 18 }
});

9. Common Mistakes

  • Trying to change Props: If a child component tries to execute props.name = "New Name";, React will throw an error. Remember: Props are read-only. They are instructions from the parent. If the data needs to change dynamically over time, it must be stored in State (which we will learn next!).

10. Best Practices

  • Prop Drilling Warning: If you have to pass a prop from Parent -> Child -> Grandchild -> GreatGrandchild just so the bottom component can read it, you have created "Prop Drilling." This is an architectural smell. In future chapters, we will learn how to use Context and Redux to solve this!

11. Practice Exercises

  1. 1. Create a ProductItem component that destructures two props: title and price.
  1. 2. How do you pass a boolean value of false to a prop named isSoldOut from the parent component?

12. MCQs with Answers

Question 1

When a parent component passes a variable to a child component via props, what syntax is strictly required in the parent's JSX?

Question 2

Why is Object Destructuring highly recommended when writing functional components that receive props?

13. Interview Questions

  • Q: Explain the concept of "One-Way Data Flow" in React. How do props enforce this paradigm?
  • Q: Contrast the process of passing string literals versus passing dynamic JavaScript expressions via props. Why is the syntax different?
  • Q: Provide an example of how you would set a default value for a prop to prevent the UI from rendering undefined if the parent fails to pass data.

14. FAQs

Q: Can I pass a function as a prop? A: Yes! This is a fundamental pattern in React. If a child component has a button, the parent can pass a function down via props (e.g., onDelete={handleDelete}). When the child button is clicked, it executes the parent's function!

15. Summary

In Chapter 7, we unlocked the secret to scalable UI architecture. We utilized Props to pass dynamic data down the component tree, transforming rigid static blocks into highly reusable templates. We mastered passing strings, numbers, booleans, and variables using exact JSX syntax. We optimized our code readability using ES6 Object Destructuring, and applied Default Props to safeguard our UI against missing data. You now have the skills to build a list of 1,000 distinct items using a single custom component.

16. Next Chapter Recommendation

Props are great, but they are static read-only data. What if the user types into a text box or clicks a counter? We need data that can change and instantly redraw the screen. Proceed to Chapter 8: State and useState Hook.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter JSX and Components in React Native
Next Chapter State and useState Hook

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5