Sharing Data Between Components Using Props in React Native

Course: React Native Training

Topic: Sharing Data Between Components Using Props

Course Link: React Native Training Course

Demo Link: Register for a Course Demo

JustAcademy: Visit JustAcademy

1. Introduction to Props in React Native

Props, short for properties, are used to pass data and configuration from one React Native component to another. They allow components to communicate and display information supplied by their parent components.

In React Native applications, the user interface is commonly divided into reusable components such as headers, buttons, profile cards, product lists, forms, and navigation screens. Props make these components flexible by allowing the parent to provide different data to each instance.

For example, an online shopping application may use one reusable ProductCard component to display different products. Instead of creating a separate component for every product, the parent can pass each product's name, price, image, and availability through props.

Learning Objectives

• Understand what props are and why they are used.
• Pass data from parent components to child components.
• Receive props using function parameters and destructuring.
• Pass strings, numbers, booleans, arrays, objects, and functions as props.
• Use callback functions to communicate child interactions to a parent.
• Understand default props, the children prop, and prop forwarding.
• Build reusable components with dynamic data.
• Understand the difference between props and state.
• Identify common prop-related mistakes and debugging techniques.

2. What Are Props?

Props are inputs received by a React component. A parent component supplies values when rendering a child component, and the child reads those values to determine what to display or how to behave.

Props are similar to arguments passed to a JavaScript function. The difference is that React components use these inputs to render user interface elements.

Basic Syntax

function Greeting(props) {
  return <Text>Hello, {props.name}!</Text>;
}

function App() {
  return <Greeting name="Amit" />;
}

In this example, App is the parent component and Greeting is the child component. The parent passes the string "Amit" using the name prop. The child receives it through the props object and displays a greeting.

Important Characteristics of Props

• Props allow components to receive external data.
• Props can contain different JavaScript values, including objects, arrays, and functions.
• Props are read-only from the receiving component's perspective.
• A parent can pass new prop values when its data changes.
• Props support component reuse and separation of responsibilities.
• Props can pass event handlers from parents to children.

3. Understanding Parent and Child Components

A parent component renders another component inside its JSX. The rendered component is called the child. The parent can pass information to the child through attributes in JSX.

Example: Parent Passing a Name

import React from 'react';
import { View, Text } from 'react-native';

function UserProfile(props) {
  return (
    <View>
      <Text>User Name: {props.name}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <UserProfile name="Priya" />
    </View>
  );
}

How the Example Works

1. The App component renders UserProfile.
2. The parent passes the value "Priya" through the name prop.
3. The child receives the prop in its props parameter.
4. The child accesses the value using props.name.
5. The displayed text becomes User Name: Priya.

This pattern keeps the parent responsible for supplying the data and the child responsible for presenting it.

4. Passing and Receiving Props with Destructuring

JavaScript object destructuring allows a component to extract individual values from the props object. This often makes component code shorter and easier to read.

Without Destructuring

function Welcome(props) {
  return (
    <Text>
      Welcome, {props.name}. Your age is {props.age}.
    </Text>
  );
}

With Destructuring

function Welcome({ name, age }) {
  return (
    <Text>
      Welcome, {name}. Your age is {age}.
    </Text>
  );
}

Both examples perform the same task. In the second example, name and age are extracted directly from the props object.

Complete React Native Example

import React from 'react';
import { View, Text } from 'react-native';

function StudentCard({ name, course, duration }) {
  return (
    <View>
      <Text>Student: {name}</Text>
      <Text>Course: {course}</Text>
      <Text>Duration: {duration}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <StudentCard
        name="Rahul"
        course="React Native"
        duration="3 Months"
      />
    </View>
  );
}

5. Types of Data That Can Be Passed Through Props

Props can contain many JavaScript data types. Understanding these types helps developers design flexible and reusable components.

Example: Passing Different Data Types

import React from 'react';
import { View, Text } from 'react-native';

function ProductInfo({ name, price, available, tags }) {
  return (
    <View>
      <Text>Product: {name}</Text>
      <Text>Price: ₹{price}</Text>
      <Text>Available: {available ? 'Yes' : 'No'}</Text>
      <Text>Tags: {tags.join(', ')}</Text>
    </View>
  );
}

export default function App() {
  return (
    <ProductInfo
      name="Wireless Mouse"
      price={799}
      available={true}
      tags={['Electronics', 'Accessories']}
    />
  );
}

Notice that JavaScript expressions such as numbers, booleans, arrays, and objects are placed inside curly braces in JSX. String values can be passed using quotation marks.

6. Passing Objects as Props

When multiple values describe one entity, passing an object can make the component interface more organized. For example, a user profile may include a name, email address, and role.

Example: User Object

import React from 'react';
import { View, Text } from 'react-native';

function ProfileCard({ user }) {
  return (
    <View>
      <Text>Name: {user.name}</Text>
      <Text>Email: {user.email}</Text>
      <Text>Role: {user.role}</Text>
    </View>
  );
}

export default function App() {
  const userData = {
    name: 'Neha Sharma',
    email: '[email protected]',
    role: 'Developer'
  };

  return <ProfileCard user={userData} />;
}

Benefits of Passing Objects

• Related information is grouped into one value.
• The component interface can remain organized when the entity has several properties.
• Objects can be passed directly from API responses after appropriate validation and transformation.
• The same data structure can be reused by several components.

However, avoid creating unnecessarily large objects containing unrelated information. A child component should receive only the data it needs whenever practical.

7. Passing Arrays as Props

Arrays are useful when a component needs to display a collection of items, such as notifications, tasks, products, or categories. The parent passes the array and the child renders its contents.

Example: Displaying a List of Courses

import React from 'react';
import { View, Text } from 'react-native';

function CourseList({ courses }) {
  return (
    <View>
      {courses.map(course => (
        <Text key={course.id}>{course.title}</Text>
      ))}
    </View>
  );
}

export default function App() {
  const courses = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'JavaScript' },
    { id: '3', title: 'Node.js' }
  ];

  return <CourseList courses={courses} />;
}

Why Is the Key Important?

When rendering a collection, React uses a stable key to identify each item across updates. Prefer a unique, stable identifier such as a database ID. Avoid using array indexes as keys when list items may be inserted, deleted, or reordered.

For long lists in React Native, FlatList is often more appropriate than rendering every item through map, because it supports efficient list rendering and scrolling.

8. Passing Functions as Props

Props are not limited to data. A parent can pass a function to a child so that the child can notify the parent when an event occurs. This is a common pattern for button presses, form submissions, selections, and deletion actions.

Data typically flows from parent to child through props, while callback functions allow a child to request that the parent perform an action.

Example: Button Callback

import React from 'react';
import { View, Text, Button } from 'react-native';

function ActionButton({ onAction }) {
  return (
    <Button title="Show Message" onPress={onAction} />
  );
}

export default function App() {
  function handleAction() {
    console.log('The child button was pressed');
  }

  return (
    <View>
      <Text>Parent Component</Text>
      <ActionButton onAction={handleAction} />
    </View>
  );
}

How It Works

1. The parent defines the handleAction function.
2. The parent passes the function through the onAction prop.
3. The child receives the function as a prop.
4. When the button is pressed, the child invokes the callback through onPress.
5. The parent's function runs.

Pass the function reference as onPress={handleAction}. Writing onPress={handleAction()} invokes the function during rendering rather than waiting for the press event.

9. Sharing Parent State with Child Components

A common pattern is for the parent to own state and pass the current value and a callback to its child. This is useful when the parent needs to control or coordinate the behavior of multiple children.

Example: Counter Controlled by a Parent

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

function CounterDisplay({ count }) {
  return <Text>Current Count: {count}</Text>;
}

function CounterControls({ onIncrease, onDecrease }) {
  return (
    <View>
      <Button title="Increase" onPress={onIncrease} />
      <Button title="Decrease" onPress={onDecrease} />
    </View>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <CounterDisplay count={count} />
      <CounterControls
        onIncrease={() => setCount(previous => previous + 1)}
        onDecrease={() => setCount(previous => previous - 1)}
      />
    </View>
  );
}

Both children work with the same state because the parent owns the counter. The display receives the value, while the controls receive functions that update it.

10. Props and State: Understanding the Difference

Props and state are both used to determine what a component displays, but they serve different purposes.

Example: Props and State Together

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

function Greeting({ name }) {
  const [likes, setLikes] = useState(0);

  return (
    <View>
      <Text>Hello, {name}!</Text>
      <Text>Likes: {likes}</Text>
      <Button
        title="Like"
        onPress={() => setLikes(previous => previous + 1)}
      />
    </View>
  );
}

export default function App() {
  return <Greeting name="Aarav" />;
}

In this example, name is received through props, while likes is local state managed by the child. The child should not directly modify the name prop.

11. Props Are Read-Only

React treats props as read-only inputs. A child component should not assign new values to its props or mutate objects and arrays received through props.

Incorrect Example

function UserCard({ user }) {
  user.name = 'Updated Name';

  return <Text>{user.name}</Text>;
}

This code mutates an object received through props. Such mutation can create unexpected behavior because the parent may be sharing the same object with other components.

Better Approach

If the child needs to request an update, pass a callback from the parent. The parent can update its own state and then provide new props.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

function UserCard({ name, onRename }) {
  return (
    <View>
      <Text>Name: {name}</Text>
      <Button title="Rename" onPress={onRename} />
    </View>
  );
}

export default function App() {
  const [name, setName] = useState('Anaya');

  return (
    <UserCard
      name={name}
      onRename={() => setName('Updated Name')}
    />
  );
}

Here, the parent owns the name state and controls how it changes. The child requests the update by invoking the callback.

12. Default Values for Props

A component can define default values for props using JavaScript destructuring. These values are used when a prop is omitted or explicitly set to undefined.

Example

import React from 'react';
import { View, Text } from 'react-native';

function UserGreeting({ name = 'Guest', message = 'Welcome' }) {
  return (
    <View>
      <Text>{message}, {name}!</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <UserGreeting />
      <UserGreeting name="Riya" />
      <UserGreeting name="Karan" message="Good morning" />
    </View>
  );
}

Expected Behavior

• The first component displays the default name and message.
• The second component uses the supplied name and the default message.
• The third component uses both supplied values.

A default value does not replace explicit values such as null or an empty string. If those values are possible, handle them according to the component's requirements.

13. Passing JSX Through the children Prop

When content is nested between a component's opening and closing tags, React passes that content to the component through the special children prop.

This approach is useful for reusable layout components such as cards, panels, containers, and modal content.

Example: Reusable Card

import React from 'react';
import { View, Text } from 'react-native';

function Card({ title, children }) {
  return (
    <View>
      <Text>{title}</Text>
      {children}
    </View>
  );
}

export default function App() {
  return (
    <Card title="Student Details">
      <Text>Name: Meera</Text>
      <Text>Course: React Native</Text>
    </Card>
  );
}

The Card component does not need to know the exact content it will contain. It simply renders whatever its parent supplies through children.

14. Forwarding Props to Another Component

Sometimes a component receives several props and needs to pass them to another component. JavaScript spread syntax can forward those values without listing every prop separately.

Example

import React from 'react';
import { View, Text } from 'react-native';

function UserDetails({ name, role }) {
  return (
    <View>
      <Text>Name: {name}</Text>
      <Text>Role: {role}</Text>
    </View>
  );
}

function UserContainer(props) {
  return <UserDetails {...props} />;
}

export default function App() {
  return (
    <UserContainer name="Dev" role="Designer" />
  );
}

The expression {'...props'} forwards the received props to UserDetails. Use this pattern when forwarding props improves clarity. Explicitly listing props is often better when a component transforms data, exposes a smaller interface, or needs to control which values are passed onward.

15. Sharing Data Across Multiple Components

Props normally pass information from a parent to its direct child. When multiple components need the same information, the parent can hold the shared data and pass the necessary values to each child.

Example: Product List and Product Details

import React from 'react';
import { View, Text } from 'react-native';

function ProductCard({ product }) {
  return (
    <View>
      <Text>{product.name}</Text>
      <Text>Price: ₹{product.price}</Text>
    </View>
  );
}

function FeaturedProduct({ product }) {
  return (
    <View>
      <Text>Featured: {product.name}</Text>
      <Text>Price: ₹{product.price}</Text>
    </View>
  );
}

export default function App() {
  const product = {
    id: 'p1',
    name: 'Bluetooth Speaker',
    price: 1499
  };

  return (
    <View>
      <ProductCard product={product} />
      <FeaturedProduct product={product} />
    </View>
  );
}

Both child components receive the same product data from the parent. The parent remains the source of the supplied information, while each child decides how to display it.

What Is Prop Drilling?

Prop drilling occurs when data must be passed through several intermediate components even though those components do not need to use the data themselves.

For example, a value may travel from App to Dashboard, then to Content, then to Profile. This is manageable in small applications, but deeply nested prop passing can become difficult to maintain.

Ways to Handle Prop Drilling

• Keep the component hierarchy simple when possible.
• Use component composition and the children prop.
• Lift state to the nearest common parent when a few related components need the same value.
• Use React Context when many components at different levels need the same information.
• Consider a state management library when shared state becomes complex.

Props remain an excellent default for direct, explicit communication. Context and global state tools should be introduced when the requirements justify them.

16. Controlled Components and Props

A controlled component receives important values through props, while its parent determines those values and handles updates. This pattern is useful for forms, filters, toggles, and coordinated UI elements.

Example: Controlled Text Input

import React from 'react';
import { View, TextInput, Text } from 'react-native';

function NameInput({ value, onChangeText }) {
  return (
    <View>
      <TextInput
        value={value}
        onChangeText={onChangeText}
        placeholder="Enter your name"
      />
      <Text>Current value: {value}</Text>
    </View>
  );
}

export default function App() {
  const [name, setName] = React.useState('');

  return (
    <NameInput value={name} onChangeText={setName} />
  );
}

The parent owns the input state and passes both the current value and the update function. As the user types, the callback updates the parent's state, and the new value returns to the child through props.

17. Props in Reusable React Native Components

Reusable components reduce repeated code and help maintain consistent UI behavior. Props allow a single component to serve different purposes by changing its content or configuration.

Example: Reusable Button

import React from 'react';
import { Button } from 'react-native';

function PrimaryButton({ title, onPress, disabled = false }) {
  return (
    <Button
      title={title}
      onPress={onPress}
      disabled={disabled}
    />
  );
}

export default PrimaryButton;

The component can now be reused with different titles, callbacks, and disabled states.

<PrimaryButton
  title="Save Profile"
  onPress={saveProfile}
/>

<PrimaryButton
  title="Submit Registration"
  onPress={submitRegistration}
  disabled={isSubmitting}
/>

This example uses React Native's built-in Button. For highly customized visual designs, a reusable component can instead use Pressable with Text and styles.

18. Props with Conditional Rendering

Props can determine what a component displays. Boolean props and other values can be used to conditionally render messages, indicators, or controls.

Example: Loading Indicator

import React from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

function LoadingStatus({ isLoading, error }) {
  if (isLoading) {
    return <ActivityIndicator />;
  }

  if (error) {
    return <Text>Unable to load data.</Text>;
  }

  return (
    <View>
      <Text>Data loaded successfully.</Text>
    </View>
  );
}

export default function App() {
  return (
    <LoadingStatus
      isLoading={false}
      error={false}
    />
  );
}

The child component changes its output according to the values received through props. In a real application, the parent would normally derive these values from request state or another appropriate source.

19. Common Mistakes When Using Props

20. Debugging Props in React Native

Problem 1: A Value Is Undefined

• Check the spelling and capitalization of the prop name.
• Confirm that the parent actually passes the value.
• Check whether an object property exists before displaying it.
• Provide a suitable default value when appropriate.

Problem 2: The UI Does Not Reflect New Data

• Confirm that the parent is rendering with the updated value.
• Check whether the child uses the correct prop.
• Ensure objects and arrays are updated immutably in the state owner.
• Avoid copying props into local state without a clear reason, as the two values can become out of sync.

Problem 3: A Button Callback Does Not Run

• Confirm that the function is passed as a reference.
• Verify that the child invokes the callback through the correct event handler.
• Check that the button is not disabled.
• Look for runtime errors in the development console.

Problem 4: A List Displays Incorrectly

• Confirm that the prop is an array.
• Check the shape of each item and the property names used in rendering.
• Provide stable keys for each rendered element.
• For large lists, consider React Native's FlatList.

21. Best Practices for Sharing Data Using Props

1. Use meaningful names: Prefer names such as userName, productPrice, and onSubmit.
2. Keep components focused: Each component should have a clear responsibility.
3. Treat props as read-only: Use callbacks to request changes rather than modifying incoming values.
4. Pass only necessary data: Avoid large, unrelated prop objects.
5. Use destructuring: Extract props to improve readability when appropriate.
6. Set sensible defaults: Use default parameter values for optional props.
7. Use callbacks for events: Keep the parent responsible for actions and state it owns.
8. Keep state ownership clear: Store each piece of state in the component or store responsible for it.
9. Use stable list keys: Give repeated elements reliable identifiers.
10. Consider Context only when needed: Direct props are often simpler for nearby components.
11. Validate external data: API responses may be missing fields or contain unexpected values.
12. Test different prop values: Check empty values, optional fields, loading states, and disabled states.

22. Practical Project: Student Profile Cards

Project Objective: Build a React Native screen that displays multiple student profiles using a reusable component and props.

Project Requirements

• Create a parent screen containing student data.
• Create a reusable StudentCard component.
• Pass student names, courses, and completion status through props.
• Display different information for each student.
• Use a stable key when rendering a list of student cards.
• Add a callback that allows a user to select a student.

Example Implementation

import React from 'react';
import { View, Text, Button } from 'react-native';

function StudentCard({ student, onSelect }) {
  return (
    <View>
      <Text>Name: {student.name}</Text>
      <Text>Course: {student.course}</Text>
      <Text>
        Status: {student.completed ? 'Completed' : 'In Progress'}
      </Text>
      <Button
        title="View Student"
        onPress={() => onSelect(student)}
      />
    </View>
  );
}

export default function App() {
  const students = [
    {
      id: 's1',
      name: 'Aarav',
      course: 'React Native',
      completed: false
    },
    {
      id: 's2',
      name: 'Diya',
      course: 'JavaScript',
      completed: true
    }
  ];

  function handleSelect(student) {
    console.log('Selected student:', student.name);
  }

  return (
    <View>
      {students.map(student => (
        <StudentCard
          key={student.id}
          student={student}
          onSelect={handleSelect}
        />
      ))}
    </View>
  );
}

Project Explanation

• The parent defines the list of students.
• The parent passes one student object to each card.
• The card reads the object's properties and displays them.
• The callback sends the selected student back to the parent.
• The unique student ID is used as the React key.
• The same card component works for different student records.

Project Extensions

• Add a student search field.
• Filter students by course.
• Add a callback to mark a course as completed.
• Display an empty-state message when no students match the filter.
• Move the student list into a separate component file.

23. Practice Exercises

1. Create a Greeting component that accepts a name and message as props.
2. Create a ProductCard component that accepts a product object with a name and price.
3. Pass an array of tasks to a child component and display each task with a unique key.
4. Create a reusable button component that accepts a title, a disabled value, and an event callback.
5. Build a parent component that owns a counter and two children: one displays the count and another changes it.
6. Create a Card component that renders nested content through the children prop.
7. Use default prop values for an optional subtitle and button label.
8. Build a profile form where the parent controls the input value and receives updates through a callback.
9. Identify and correct a component that attempts to mutate an object received through props.
10. Create a product list and explain when passing props is sufficient and when Context might be useful.

24. Interview Questions and Answers

Q1. What are props in React Native?

Answer: Props are inputs passed from one component to another. They allow a parent component to provide data and configuration to a child.

Q2. What is the main purpose of props?

Answer: Props support communication between components and allow components to be reused with different data.

Q3. Are props mutable?

Answer: No. A component should treat its props as read-only. If a value needs to change, the parent can supply new props or the component can manage appropriate local state.

Q4. How do you pass a string prop?

Answer: Use a quoted JSX attribute, such as <Greeting name="Amit" />.

Q5. How do you pass a number or boolean prop?

Answer: Use curly braces, such as <Product price={500} available={true} />.

Q6. What is prop destructuring?

Answer: Destructuring extracts individual properties from the props object in the component's parameter list, for example function Greeting({ name }).

Q7. Can functions be passed as props?

Answer: Yes. Functions are often passed as callbacks so a child can notify its parent about events such as a button press or form submission.

Q8. What is the children prop?

Answer: The children prop contains the content nested between a component's opening and closing JSX tags.

Q9. What is prop drilling?

Answer: Prop drilling is passing data through several intermediate components that do not directly use it. Context or component composition can help when this becomes difficult to maintain.

Q10. What is the difference between props and state?

Answer: Props are inputs supplied by another component, while state is data managed by a component or state system and updated through its state management mechanism.

Q11. How can a child request a parent state update?

Answer: The parent passes a callback function through props. The child invokes that callback when an appropriate event occurs, and the parent updates its state.

Q12. What are default prop values?

Answer: Default values are fallback values used when a prop is omitted or is undefined. In function components, they can be specified through parameter destructuring.

Q13. Can props contain objects and arrays?

Answer: Yes. Objects are useful for related entity data, while arrays are useful for collections such as products, tasks, and notifications.

Q14. Why are keys used when rendering lists?

Answer: Keys help React identify list elements between renders so it can reconcile insertions, deletions, and reordering correctly.

Q15. When should Context be considered instead of props?

Answer: Context is useful when many components at different levels need the same value and passing it through intermediate components becomes cumbersome. Props are often clearer for direct parent-child communication.

25. Quick Revision Checklist

• Props are inputs passed from parent components to child components.
• Props support reusable and configurable components.
• Read props through the props object or destructuring.
• Use curly braces to pass JavaScript expressions such as numbers, booleans, arrays, and objects.
• Functions can be passed as callback props.
• The children prop contains nested JSX.
• Default parameter values can handle missing optional props.
• Props should be treated as read-only.
• Use parent-owned state and callbacks when children need coordinated updates.
• Use stable keys when rendering lists.
• Prop drilling can be reduced through composition, lifting state, or Context when appropriate.
• Keep each component's interface clear and pass only the information it needs.

26. Conclusion

Sharing data between components using props is one of the foundational skills in React Native development. Props allow parents to supply values, objects, arrays, callbacks, and nested content to children. This creates reusable components that can display different data without duplicating their implementation.

For reliable applications, treat props as read-only, keep state ownership clear, use callbacks when a child needs to request an update, and consider Context only when information must be shared more broadly. These practices help developers build React Native applications that are easier to maintain, test, and extend.

Further Learning: React Documentation: Passing Props to a Component | React Documentation: Sharing State Between Components | React Documentation: Passing Data Deeply with Context