React Props – Passing Data Between Components in a Scalable Way

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.