# Lesson3-2: State Management: Pass Data Into Components With Props
###### tags: `Recat`
{%youtube KJfpF08R6bw%}
You'll be needing this `contacts` array in the following video:

const contacts = [
 {
   "id": "karen",
   "name": "Karen Isgrigg",
   "handle": "karen_isgrigg",
   "avatarURL": "http://localhost:5001/karen.jpg"
 },
 {
   "id": "richard",
   "name": "Richard Kalehoff",
   "handle": "richardkalehoff",
   "avatarURL": "http://localhost:5001/richard.jpg"
 },
 {
   "id": "tyler",
   "name": "Tyler McGinnis",
   "handle": "tylermcginnis",
   "avatarURL": "http://localhost:5001/tyler.jpg"
 }
];

This `contacts` array is just temporary. Eventually, we'll be retrieving and storing contacts on our backend server. As of right now, though, we don't know how or where to make network requests. We'll get to this soon, so just stick with this static list of contacts for now.

# Apps Are Running?
To follow along, make sure that both your Contacts app and the backend server are running.
{%youtube jf1CJcJRjYU%}

[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/c1bc05e7f73ab27c78ea32f11be0378f7daa42b4)

{%youtube mGe81Nl3zWU%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/59e929c295c5b841eef9c62533ecfade7658e545)

{%youtube knLnMTgn6a8%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/7e77074e1a2fc63fab7374c527a301a7df08802b)

> If you're following along on your own machine and the avatar images are not loading for you, check that the server is running.

# Passing Data With Props Recap
A `prop` is any input that you pass to a React component. Just like an HTML attribute, a prop name and value are added to the Component.

// passing a prop to a component
<LogoutButton text='Wanna log out?' />

In the code above, `text` is the prop and the string `'Wanna log out?'` is the value.

All props are stored on the `this.props object`. So to access this text prop from inside the component, we'd use `this.props.text`:

// access the prop inside the component
...
render() {
 return <div>{this.props.text}</div>
}
...

# Further Research
- [Components and Props](https://facebook.github.io/react/docs/components-and-props.html) from the React Docs