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.
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 (
);
};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}
))}
);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}
);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 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.
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.