Skip to content
This repository was archived by the owner on Sep 1, 2022. It is now read-only.

Commit e4e79f5

Browse files
committed
update responses for step 3
1 parent da0e150 commit e4e79f5

File tree

3 files changed

+19
-21
lines changed

3 files changed

+19
-21
lines changed

responses/02_import-child-component-activity.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,19 @@ In this step, we will import the `List` component that we created for you into `
44

55
### :keyboard: Activity: Import a List component to `src/App.jsx`
66

7-
1. At the top of `src/App.jsx`, on line 3, replace the line with
8-
7+
1. At the top of `src/App.jsx`, replace line 3 with:
98
```js
109
import List from "./List";
1110
```
12-
2. Save your code
11+
2. Save your file
1312
3. To run your code, move inside your repo folder in your terminal and run `npm start`
1413
4. Exit the process in your terminal using `Ctrl + C`
15-
5. Commit and push your code to the `changes` branch:
14+
5. Stage, commit, and push your changes to the `changes` branch:
1615
```
1716
git add src/App.jsx
1817
git commit -m "import list component"
1918
git push
2019
```
2120

2221
<hr>
23-
<h3 align="center">Watch below this comment for my response</h3>
22+
<h3 align="center">Watch below this comment for my response.</h3>

responses/02_props.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
## How to Talk to your Child - Props
1+
## Interacting with `child` components with `props`
22

33
Now, let's discuss how we can reuse the same component with different properties.
44

5-
That might sound a little confusing, but let's take a look. Go to our final [solution](https://githubtraining.github.io/react-solution/) and add some assignments along with students. You might start to notice that both lists look the same but with different values. In fact, both lists are the same component!
5+
That might sound a little confusing, but let's take a look. Go to our final [solution](https://githubtraining.github.io/react-solution/) and add some assignments along with students. You might start to notice that both lists look the same, but with different values. In fact, both lists are the same component!
66

7-
However, how do we pass different values to a component? We do so by passing **properties to the component**, otherwise known as **props**.
8-
9-
We will get a little deeper into that in a bit.
7+
How do we pass different values to a component? We pass **properties** to the component, otherwise known as **props**.
108

119
### Props used for Assignments and Students Pages
10+
1211
![Finished Assignments Page](https://user-images.githubusercontent.com/25253905/61293228-11f26580-a788-11e9-90ac-9612c2bddf6b.png)
1312

1413
![Finished Students Page](https://user-images.githubusercontent.com/25253905/61293769-46b2ec80-a789-11e9-88b3-c660f436f5bf.png)
1514

16-
Take a look at our final solution for our assignments and students page above. You'll see that they look really similar. The lists are the same component, but with different values. We need to learn to pass different values to the same components.
15+
Take a look at our final solution for our assignments and students page above. You'll see that they look similar. The lists are the same component, but with different values. Next, we'll learn to pass different values to the same components.
Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
1-
## Step 4: Uncomment Assignments Section
1+
# Conditional Rendering
22

3-
Now that we imported the child component, let's use it in our code. At the end of this step, you should be able to click on the `Assignments` tab and render the following:
3+
Let's take a look at what the code between lines 52 and 61 means. When we click the `Assignments` button, the list for assignments is assigned to the variable `tabChoice`. `tabChoice` is rendered in the `render` method.
44

5-
![No Title Assignments](https://user-images.githubusercontent.com/25253905/61294177-1ddf2700-a78a-11e9-963d-8b6d2a4f7b82.png)
5+
But how do we specialize the `List` for our assignments? This where our props come into play. We create properties such as `placeholder`, and `currList`. We then assign values to them.
66

7-
### Understanding Conditional Rendering
7+
## Step 4: Import Assignments
88

9-
Let's take a look at what the code between lines 52 and 61 means. Basically, what it is saying is that when we click the `Assignments` button, the list for assignments will be assigned to the variable `tabChoice`. In our `render` method, we see that `tabChoice` is rendered.
9+
Now that we imported the child component, let's use it in our code. At the end of this step, you should be able to click on the `Assignments` tab and render the following:
1010

11-
But how do we specialize the `List` for our assignments? This where our props come into play. We create properties such as `placeholder`, and `currList`. We then assign values to them.
11+
![No Title Assignments](https://user-images.githubusercontent.com/25253905/61294177-1ddf2700-a78a-11e9-963d-8b6d2a4f7b82.png)
1212

1313
### :keyboard: Activity: Uncomment the assignments conditional in `src/App.jsx`
1414

15-
1. Go ahead and uncomment the conditional statement betweens lines 52 and 61 underneath where it says to `Uncomment below to render assignments`
16-
2. Save your code
15+
1. In `src/App.jsx`, uncomment the conditional statement between lines 52 and 61
16+
2. Save your changes
1717
3. To run your code, move inside your repo folder in your terminal and run `npm start`
1818
4. Exit the process in your terminal using `Ctrl + C`
19-
5. Commit and push your code to the `changes` branch:
19+
5. Stage, commit, and push your code to the `changes` branch:
2020
```
2121
git add src/App.jsx
2222
git commit -m "uncomment assignment rendering"
2323
git push
2424
```
2525
<hr>
26-
<h3 align="center">Watch below this comment for my response</h3>
26+
<h3 align="center">Watch below this comment for my response.</h3>

0 commit comments

Comments
 (0)