LogoفارسیFA

React Props – Passing Data Between Components in a Scalable Way

Props are the primary mechanism for passing data from one React component to another. This article explains how to move data from global scope into the App component, pass it down to child components using props, and extract reusable components like Item from List. It also covers best practices, immutability, and the role of the key attribute in list rendering.

Reactpropscomponent hierarchydata passing

~2 min read · Updated Oct 21, 2025

Introduction


In React, props (short for “properties”) are used to pass data from one component to another. This approach replaces global variables and enables scalable, maintainable applications with multiple components across different files.


Moving Data into the App Component


Instead of using a global variable, we define the data inside the App component:


const App = () => {
  const stories = [
    {
      title: 'React',
      url: 'https://react.dev/',
      author: 'Jordan Walke',
      num_comments: 3,
      points: 4,
      objectID: 0,
    },
    {
      title: 'Redux',
      url: 'https://redux.js.org/',
      author: 'Dan Abramov, Andrew Clark',
      num_comments: 2,
      points: 5,
      objectID: 1,
    },
  ];

  return (
    

      
    

  );
};

Passing Props to Child Components


We pass the stories array to the List component using a custom attribute:


<List list={stories} />

Inside the List component, we access the data via the props parameter:


const List = (props) => (
  
    
    {props.list.map((item) => (
      
  • {item.title}
    • 
    ))}
  

);

Extracting the Item Component


Now that we understand props, we can extract an Item component from List and pass each item individually:


const List = (props) => (
  
    
    {props.list.map((item) => (
      
    ))}
  

);

const Item = (props) => (
  
  • 
    
      {props.item.title}
    
    {props.item.author}
    {props.item.num_comments}
    {props.item.points}
  
    • 
);

    Why the Key Attribute Matters


    When rendering lists in React, each item must have a unique key to help React track and update elements efficiently. Without it, performance issues and rendering bugs may occur.


    Props Are Immutable


    Props are read-only. You cannot modify them inside the child component. They are designed to flow one way — from parent to child — and represent a snapshot of data passed down the component tree.


    Conclusion


    Props are essential for building scalable React applications. They allow you to pass data between components, extract reusable units, and maintain a clean component hierarchy. As your app grows, mastering props will help you keep your code organized and predictable.


    Written & researched by Dr. Shahin Siami

    Related Articles

    Forms in React – Submitting Data with onSubmit and Action in Search Forms

    react-forms-Forms are essential in modern applications. This article walks through building a search form in React using input and button elements. First, we use the onSubmit attribute to manage form submission, then introduce the action attribute to align with native HTML behavior. This structure improves accessibility, readability, and prepares the app for future React updates.submit-search-with-onsubmit-and-action

    Continue

    Third-Party Libraries in React – Using Axios and Async/Await for Data Fetching

    This article explores how to replace the native fetch API with the more stable and feature-rich Axios library for data fetching in React. It also demonstrates how to refactor promise-based code using async/await and try/catch blocks for improved readability and error handling. These techniques enhance compatibility with older browsers, improve testability, and simplify asynchronous logic.

    Continue

    Explicit Data Fetching in React – Controlling API Requests with a Confirmation Button

    In the initial implementation, every keystroke in the search field triggered a new API request. This article demonstrates how to shift to explicit data fetching in React, where data is only fetched when the user clicks a confirmation button. By separating the searchTerm and url states, and using useCallback and useEffect, we gain full control over when API requests are sent.

    Continue

    Impossible States in React – Predictable State Management with useReducer

    Using multiple useState hooks to manage related states like data, loading, and error can lead to impossible states — combinations that should never occur in a well-designed UI. This article shows how to consolidate related states into a single useReducer hook, enabling predictable transitions and eliminating bugs like simultaneous loading and error indicators. By structuring state as a complex object and dispatching clearly defined actions, we gain control and clarity in asynchronous data flows.

    Continue

    Advanced State Management in React – Using useReducer for Complex Transitions

    While useState is ideal for simple state updates, React’s useReducer hook offers a more scalable solution for managing complex state transitions. This article demonstrates how to migrate story-related state from useState to useReducer, handle multiple actions like setting and removing stories, and refactor reducer logic for clarity. It’s a foundational step toward building robust, declarative state logic in React applications.

    Continue

    Conditional Rendering in React – Displaying Loading and Error States for Asynchronous Data

    Conditional rendering in React is a powerful tool for controlling what appears in the UI based on different states. This article explains how to show a “Loading…” message while asynchronous data is being fetched, and how to display an error message if the request fails. Using useState and useEffect, we manage isLoading and isError flags, and render content dynamically using ternary and logical operators.

    Continue
    Previous ArticleNext Article