## React Props (R2R)
🔹 *parent* [[❞ React Fundamentals (R2R)|React Fundamentals (R2R)]]
🔸*prev* [[❜ React DOM|React DOM]] *next* [[❞ React State|React State]] | [[❞ Callback Handlers in React|Callback Handlers]]
### React Props
>*Everything that we pass from a parent component to a child component via a component element’s HTML attribute can be accessed in the child component. The child component receives an object parameter ( props ) which includes all the passed attributes as properties (props).*
>— Robin Wieruch. The Road to React (Kindle Locations 699-701).
We've taken the list off the global object and added it to the App. We then *pass the variable into the List component as an HMTL attribute.*
```js
const App = () => {
const stories = [
{
title: 'React',
url: 'https://reactjs.org/',
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 (
<div>
<h1>My hacker stories</h1>
<Search />
<hr />
<List list={stories} />
</div>
);
}
```
Now it can be used in the List component as *props*. Note here that *props* is passed as an argument, which is the reference point for the *object parameter*, which is *passed attributes as properties*.
```js
const List = (props) => (
<ul>
// Note here that props is passed as an argument, which is the reference point for the list data attributes.
{props.list.map((item) => (
<li key={item.objectID}>
<span>
<a href={item.url}>{item.title}</a>
</span>
<span>{item.author}</span>
<span>{item.num_comments}</span>
<span>{item.points}</span>
</li>
))}
</ul>
);
```
By passing information from one component to another, we've avoided *polluting the global scope*. In understanding how this information will be sent, we can now extract a child component from the list component.
```js
const List = (props) => (
<ul>
{props.list.map((item) => (
<Item key={item.objectID} item={item} />
))}
</ul>
);
const Item = (props) => (
<li>
<span>
<a href={props.item.url}>{props.item.title}</a>
</span>
<span>{props.item.author}</span>
<span>{props.item.num_comments}</span>
<span>{props.item.points}</span>
</li>
);
```
Information (props) can only be passed from a parent to a child component and not vice versa.