Changes

[coderj001]

No description provided.

[github-learning-lab]

Building Blocks of Life Apps - Components

Awesome! You successfully opened a pull request!

In this Pull Request you will:

• Add components
• Pass data to child components
• Create and use state variables
• Use callback functions to communicate data

First, we'll learn about components.

Components

Components are the building blocks of React apps. Think of components as different parts of the app. Each button is a component, each paragraph of text is a component, and so on. From html, you might recognize some of the built in components like <div /> and <li />. In React, we can create our own components! How cool is that?

Components in src/App.jsx

In our solution, our assignments page looks like the above. The overall webpage is a component called App. Inside App there are other components like buttons, titles, and custom components that we can create (like the Assginments List).

Take a look at the following line in src/App.jsx.

class App extends React.Component

This line takes a component's properties to create a component named "App". In the render method of App, there are other components like <button/>. These components are child components because they are all a part of its parent, App.

Scroll down to add a header component.

[github-learning-lab]

Step 2: Adding components

Let's add a child component and give our app a header. At the end of the step, your app should like the following:

⌨️ Activity: Add an h3 component to src/App.jsx

1. In src/App.jsx, replace line 92 with this header component:

   <h3 className="Box-title d-flex flex-justify-center">GradeBook</h3>

2. Save your file
3. To run the code, move inside the repository directory in your terminal and run npm start
4. Exit the process in your terminal using Ctrl + C
5. Stage, commit, and push your code to the changes branch:

   git add src/App.jsx
   git commit -m "add a header component"
   git push
   

---

Watch below this comment for my response.

[github-learning-lab]

Interacting with child components with props

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

That might sound a little confusing, but let's take a look. Go to our final 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!

How do we pass different values to a component? We pass properties to the component, otherwise known as props.

Props are the input to components. Props allow us to reuse a component (like a list) in multiple places within our app.

Props used for Assignments and Students Pages

Take a look at our final solution for our assignments and students page above. You'll see that they look similar. The lists used in the assignments and students pages use the same component, but with different values (props). Next, we'll learn to pass different values to the same components.

[github-learning-lab]

Step 3: Import a Child Component

In this step, we will import the List component that we created for you into App.

⌨️ Activity: Import a List component to src/App.jsx

1. At the top of src/App.jsx, replace line 3 with:

   import List from "./List";

2. Save your file
3. To run your code, move inside your repo folder in your terminal and run npm start
4. Exit the process in your terminal using Ctrl + C
5. Stage, commit, and push your changes to the changes branch:

   git add src/App.jsx
   git commit -m "import list component"
   git push
   

---

Watch below this comment for my response.

[github-learning-lab]

Conditional Rendering

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.

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.

Step 4: Import Assignments

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:

⌨️ Activity: Uncomment the assignments conditional in src/App.jsx

1. In src/App.jsx, uncomment the conditional statement between lines 52 and 61
2. Save your changes
3. To run your code, move inside your repo folder in your terminal and run npm start
4. Exit the process in your terminal using Ctrl + C
5. Stage, commit, and push your changes to the changes branch:

   git add src/App.jsx
   git commit -m "uncomment assignment rendering"
   git push
   

---

Watch below this comment for my response.

[github-learning-lab]

Step 5: Adding a prop

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.

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 our this.props.currList. This shows each item in the list that we pass.

Let's go ahead and replace the current title with another prop.

⌨️ Activity: Replace the title prop in src/List.jsx

1. In src/List.jsx, replace line 31 with {this.props.title}
2. Save your changes
3. To run your code, move inside your repo folder in your terminal and run npm start
4. Exit the process in your terminal using Ctrl + C
5. Stage, commit, and push your changes to the changes branch:

   git add src/List.jsx
   git commit -m "use a prop for the header"
   git push
   

---

Watch below this comment for my response.

[github-learning-lab]

State Variables

So now, we learned how to pass data to components, but let's talk about the data itself.

There are two types of data: static data and dynamic data.

Static data doesn't change. Things like a title on a page or the name of a button would be static data.

Dynamic data, on the other hand, is data that does change. In our example, we can change it by adding an item to the list. Our list of assignments would also be considered dynamic data. But, how do we deal with dynamic data in React?

Scroll below to take a look in the code!

[github-learning-lab]

State variables

In React, we store dynamic data in state variables. Let's take a look at how we store state variables. In src/App.jsx, take a look at the constructor. You'll see that we declare our state variables using this.state = {.....}.

Currently, in App, we have three state variables:

• buttonClicked - This stores which button was clicked. It is a state variable because the button that is clicked has the ability to change.
• assignments - This stores the list of assignments. It is a state variable because the list changes every time a new assignment is added.
• grades - This should store the grade for each student. However, we have no way to store students, so let's fix that!

Step 6: Add a state variable

Let's add a way to store students as a variable.

⌨️ Activity: Add a state variable to src/App.jsx

1. On line 11 of src/App.jsx, add a state variable named students
2. Set students equal to an empty array
3. Add a comma: students: [],
4. Save your changes
5. To run your code, move inside your repo folder in your terminal and run npm start
6. Exit the process in your terminal using Ctrl + C
7. Stage, commit, and push your changes to the changes branch:

   git add src/App.jsx
   git commit -m "add a state variable for students"
   git push
   

---

Watch below this comment for my response.

[github-learning-lab]

It looks like you did not add a students state variable.

Try again!

If you would like assistance troubleshooting the issue you are encountering, create a post on the GitHub Community board. You might also want to search for your issue to see if other people have resolved it in the past.

[github-learning-lab]

Explaining this.setState

How do we change data within a state variable?

Unfortunately, we can't just do this.state.studentsList = ..... to change data.

To set the state of a state variable we have to use the method, this.setState.

Take a look at the method on line 30 in src/App.jsx

When this method is called, it is adding assignmentName to our state variable assignments by setting the state of assignments to itself with the concatenation of assignmentName.

We are going to set some state in next steps.

[github-learning-lab]

Step 7: Create a method

Now that we see how it works with assignments, let's try it with students! We will create an addStudent method to add students the same way we add assignments.

⌨️ Activity: Create an addStudent method in src/App.jsx

1. On line 37 of src/App.jsx, create a method called addStudent below the comment
   • addStudent should take studentName as a parameter
   • addStudent should concat studentName to the end of students list that we created earlier
   • Hint: You can copy the same format for the addAssignment method
2. Save your changes
3. To run your code, move inside your repo folder in your terminal and run npm start
4. Exit the process in your terminal using Ctrl + C
5. Stage, commit, and push your changes to the changes branch:

   git add src/App.jsx
   git commit -m "create addStudent method"
   git push
   

---

Watch below this comment for my response.

[github-learning-lab]

Step 8: Binding a method

Since we created a method that changes a state variable, we have to bind it to our class. Then, when we call it, we know what method to reference.

⌨️ Activity: Bind addStudent to App

1. Uncomment line 18 of src/App.jsx to bind addStudent to App
2. Save your changes
3. To run your code, move inside your repo folder in your terminal and run npm start
4. Exit the process in your terminal using Ctrl + C
5. Stage, commit, and push your changes to the changes branch:

   git add src/App.jsx
   git commit -m "bind addStudent to App"
   git push
   

---

Watch below this comment for my response.

[github-learning-lab]

Callback Functions

The last thing you need to know before you can call yourself a React Developer is callback functions. We said that we can pass data to the child with props, but what about passing data from the child to the parent?

With callback functions, we are able to do just that. We pass a function as a prop, and then the child component can call the function that was defined in the parent. Let's look at an example below.

[github-learning-lab]

Example of passing functions as props

So where exactly are those functions we created to set state getting called?

On line 63 in src/App.jsx, it looks like we pass the addAssignment function as a prop in this chunk of code.

Navigate to src/List.jsx and take a look at the code between lines 18 and 25 in src/List.jsx.

handleSubmit(event) {
    this.setState({
      value: ""
    });

    this.props.addFunction(this.state.value);
    event.preventDefault();
}

When the submit button is clicked, we call the addFunction with the value of our input box. For assignments, the addFunction references the this.addAssignment in App. So when we call this.props.addFunction, we are calling back to the parent component and using the parent's function.

Scroll below for next steps.

[github-learning-lab]

Step 9: Adding the correct props

There are some issues with this code. We want to be modifying the students list, not the assignments list.

Let's change some props between lines 71 and 80 to render the correct components when we click Students.

⌨️ Activity: Change the props for Students

1. Uncomment the conditional statement between lines 65 and 75 of src/App.jsx
2. On line 68, change the placeholder prop to "Add Student..."
3. On line 69, change the currList prop to {this.state.students}
4. On line 70, change the addFunction prop to {this.addStudent}
5. Save your changes
6. To run your code, move inside your repo folder in your terminal and run npm start
7. Exit the process in your terminal using Ctrl + C
8. Stage, commit, and push your changes to the changes branch:

   git add src/App.jsx
   git commit -m "change props for students rendering"
   git push
   

---

Watch below this comment for my response.

[github-learning-lab]

It looks like you did not replace the props for student rendering.

Try again!

If you would like assistance troubleshooting the issue you are encountering, create a post on the GitHub Community board. You might also want to search for your issue to see if other people have resolved it in the past.

[github-learning-lab]

Step 10: Include Grades

Let's get our grades working! At the end of this activity, your code should now be able to add assignments, students, and grades.

⌨️ Activity: Uncomment the grades conditional in src/App.jsx

1. In the src/App.jsx file, uncomment the conditional statement between lines 77 and 86 for our grades tab
2. Save your changes
3. To run your code, move inside your repo folder in your terminal and run npm start
4. Exit the process using Ctrl + C
5. Stage, commit, and push your changes to the changes branch:

   git add src/App.jsx
   git commit -m "uncomment grades section"
   git push
   

---

Watch below this comment for my response.

[github-learning-lab]

Step 11: Merge your pull request

Now that we've approved the changes, it's time to merge the pull request.

⌨️ Activity: Merge the changes branch into master

1. Click the Merge Pull Request button

---

Watch below this comment for my response.

[github-learning-lab]

Congratulations!

Congratulations on finishing Introduction to React. To update your local course, use git checkout master and git pull.

Although this course certainly doesn't mean you are a React expert, we hope you have the tools to explore further content on your own. Here are some cool resources for further learning:

• Create your own React App
• Deploying a React App to GitHub Pages