|
1 |
| -## Step 4: Uncomment Assignments Section |
| 1 | +# Conditional Rendering |
2 | 2 |
|
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. |
4 | 4 |
|
5 |
| - |
| 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. |
6 | 6 |
|
7 |
| -### Understanding Conditional Rendering |
| 7 | +## Step 4: Import Assignments |
8 | 8 |
|
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: |
10 | 10 |
|
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 | + |
12 | 12 |
|
13 | 13 | ### :keyboard: Activity: Uncomment the assignments conditional in `src/App.jsx`
|
14 | 14 |
|
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 |
17 | 17 | 3. To run your code, move inside your repo folder in your terminal and run `npm start`
|
18 | 18 | 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: |
20 | 20 | ```
|
21 | 21 | git add src/App.jsx
|
22 | 22 | git commit -m "uncomment assignment rendering"
|
23 | 23 | git push
|
24 | 24 | ```
|
25 | 25 | <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