Passing data to components using props

Published: 2021-06-04 12:09:46

Props, a shorthand for properties, is a way to send information from a parent to a child. This allows components to look and behave differently based on properties that the parent sends.

---

# Pre-requisites
**[Destructuring](https://www.youtube.com/watch?v=UgEaJBz3bjY):** A way to extract the keys from an Object for easier use in JavaScript. (watch from 1:05)

--- 

# Intended result
This is what we are going to have by the end of the article.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/douydrpzl3tu5z5d7dcm.png)
Figure 1: A webpage with the 3 copies of the same component, but with different titles and pictures.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l75ul3goskiu9y67q07q.png)
Figure 2: The app hierarchy chart. Note that we are sending the title and the picture from `App.jsx` to each copy of `MyComponent.jsx`.

---

# Getting started
In order to pass props, we need to modify the component that sends information called the parent, and the component that receives the information called the child.
1. [Pass props from the parent](#guide-parent)
1. [Receive and use the props in the children](#guide-child)

<span id="guide-parent">&nbsp;<span/>
### Pass props from the parent:
```jsx
// App.jsx

import MyComponent from "./components/MyComponent";

// Images
import DogPicture from "./images/dog.jpg";
import CatPicture from "./images/cat.jpg";
import BirdPicture from "./images/cat-food.jpg";

export default function App() {
  return (
    <div className="App">
      <MyComponent title="Puppy" picture={DogPicture} />
      <MyComponent title="Whiskers" picture={CatPicture} />
      <MyComponent title="Birdie" picture={BirdPicture} />
    </div>
  );
}
```
Let's analyze the code line by line:
1. Add a property to the instance of the component. In this example, `title` with the value `"Puppy"`.
2. If you want to use images, you need to import them first.

<span id="guide-child">&nbsp;<span/>
### Receive and use the props in the children:
```jsx
// MyComponent.jsx

export default function MyComponent({ title, picture }) {
  return (
    <div className="my-component">
      <h2>{title}</h2>
      <img src={picture} />
    </div>
  );
}
```

Let's analyze the code line by line:
1. Put the props send from the parent as arguments in the function parameters. Note that the props are wrapped around curly braces `{}` This is called destructuring. Watch the pre-requisites video for more information.
2. To show the text put the property inside the tags `<h2>{title}</h2>`.
3. To add a property to a tag, use the syntax `src={picture}`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdpuuvyio4km88zonyl2.png)

---

# Conclusions
You are close to finish the contents of the first day of React. Take a pause and practice what you have learned so far before going to the last [article] (https://dev.to/softwaredevacademy/creating-a-list-of-components-using-functional-programming-5aa7) of the day.

Seriously, take a break. You have achieve a lot so far. But for the next topic I need you well rested in order to absorb a lot of new information. So take a break, then practice what we have done so far and then open the last link of the day.

If want can to see the finished code, open this [link](https://github.com/softwaredevacademy/sda-react-articles) and open the branch passing-props.

Finally, this is the TLDR (To Long Didn't Read) version of this article.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pldvzawbqu4k5j21voob.png)

---

# Credits:
* Cover: Photo by <a href="https://unsplash.com/@annikamaria?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Annika Gordon</a> on <a href="/s/photos/sharing?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
* Dog picture: Photo by <a href="https://unsplash.com/@karsten116?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Karsten Winegeart</a> on <a href="/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
* Cat picture: Photo by <a href="https://unsplash.com/@madhatterzone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Manja Vitolic</a> on <a href="/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
* Bird picture: Photo by <a href="https://unsplash.com/@alistairdent?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Alistair Dent</a> on <a href="/collections/1264592/freedom-zone-banner?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>