|
1 |
| -## Step 5: Adding a prop |
| 1 | +## Step 5: Adding a `prop` |
2 | 2 |
|
3 |
| -But what does the `List` component do with this information? Let's take a look. |
| 3 | +What does the `List` component do with the information we just included? Adding `this.props` tells the component to look for the property that was passed to it. |
4 | 4 |
|
5 |
| -Go to `src/List.jsx`. In the `render` method, in our input tag, you see that we set our `placeholder` to `this.props.placeholder`, and then at the bottom of our `render` method, we loop through out `this.props.currList`, to show each item in the list that we pass. Adding `this.props` tells the component to look for that property that was passed to it. |
| 5 | +To see, open the `src/List.jsx` file. In the `render` method, in our input tag, notice that we set our `placeholder` to `this.props.placeholder`. Then, at the bottom of our `render` method, we loop through out `this.props.currList`. This shows each item in the list that we pass. |
6 | 6 |
|
7 |
| -Let's go ahead and replace that title with a prop. |
| 7 | +Let's go ahead and replace the current title with another `prop`. |
8 | 8 |
|
9 | 9 | ### :keyboard: Activity: Replace the title prop in `src/List.jsx`
|
10 | 10 |
|
11 |
| -1. In our `render` method in `src/List.jsx`, on line 31, replace `REPLACE THIS TITLE WITH A PROP` with `{this.props.title}` |
12 |
| -2. Save your code |
| 11 | +1. In `src/List.jsx`, replace line 31 with `{this.props.title}` |
| 12 | +2. Save your changes |
13 | 13 | 3. To run your code, move inside your repo folder in your terminal and run `npm start`
|
14 | 14 | 4. Exit the process in your terminal using `Ctrl + C`
|
15 |
| -5. Commit and push your code to the `changes` branch: |
| 15 | +5. Stage, commit, and push your changes to the `changes` branch: |
16 | 16 | ```
|
17 | 17 | git add src/List.jsx
|
18 |
| - git commit -m "use a prop" |
| 18 | + git commit -m "use a prop for the header" |
19 | 19 | git push
|
20 | 20 | ```
|
21 | 21 |
|
22 | 22 | <hr>
|
23 |
| -<h3 align="center">Watch below this comment for my response</h3> |
| 23 | +<h3 align="center">Watch below this comment for my response.</h3> |
0 commit comments