Skip to content

Changes #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
Sep 17, 2020
Merged

Changes #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a257943
setting up changes to add
githubteacher Jul 10, 2019
1e8a713
fixing some stuff
githubteacher Jul 15, 2019
acb1b15
remove step number
githubteacher Aug 14, 2019
0f2cc53
fix steps
githubteacher Aug 14, 2019
e25ccee
add a header component
coderj001 Sep 17, 2020
724a880
import list component
coderj001 Sep 17, 2020
f3d2353
uncomment assignment rendering
coderj001 Sep 17, 2020
5536c12
use a prop for the header
coderj001 Sep 17, 2020
5c10e1b
add a state variable for students
coderj001 Sep 17, 2020
0ea3713
add a state variable for students
coderj001 Sep 17, 2020
b6ad27f
create addStudent method
coderj001 Sep 17, 2020
0478965
bind addStudent to App
coderj001 Sep 17, 2020
c7760be
change props for students rendering
coderj001 Sep 17, 2020
cc85d8b
change props for students rendering
coderj001 Sep 17, 2020
3cafd73
uncomment grades section
coderj001 Sep 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 54 additions & 4 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,42 @@
import React from "react";
import Table from "./Table";
import List from "./List";

class App extends React.Component {
constructor(props) {
super(props);

this.state = {
buttonClicked: "",
assignments: [],
grades: {}
Copy link

@github-learning-lab github-learning-lab bot Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

assignments: [] /*Below this line, add the students state variable*/,
students: [],
grades: {},
};

this.handleButtonClicked = this.handleButtonClicked.bind(this);
this.addAssignment = this.addAssignment.bind(this);
/*Uncomment the line below to bind the method*/
Copy link

@github-learning-lab github-learning-lab bot Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

this.addStudent = this.addStudent.bind(this);
this.addGrade = this.addGrade.bind(this);
}

handleButtonClicked(buttonName) {
this.setState({
buttonClicked: buttonName
buttonClicked: buttonName,
});
}

/*Check out this addAssignment method*/
Copy link

@github-learning-lab github-learning-lab bot Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

addAssignment(assignmentName) {
this.setState({
assignments: this.state.assignments.concat(assignmentName)
assignments: this.state.assignments.concat(assignmentName),
});
}
Copy link

@github-learning-lab github-learning-lab bot Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


/*Write an addStudent method here*/
addStudent(studentName) {
this.setState({
assignments: this.state.students.concat(studentName),
});
}

Expand All @@ -42,10 +54,48 @@ class App extends React.Component {
render() {
let tabChoice = <div />;
Copy link

@github-learning-lab github-learning-lab bot Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

No Title Assignments

⌨️ 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.


/*Uncomment below to render assignments*/
if (this.state.buttonClicked === "assignments") {
Copy link

@github-learning-lab github-learning-lab bot Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

tabChoice = (
<List
placeholder="Add Assignment..."
currList={this.state.assignments}
addFunction={this.addAssignment}
title="Assignments"
/>
);
}

/* Change below to render students*/

if (this.state.buttonClicked === "students") {
tabChoice = (
<List
placeholder="Add Student..."
currList={this.state.students}
addFunction={this.addStudent}
title="Student Roster"
/>
);
}

/* Uncomment lines below to render grades*/
if (this.state.buttonClicked === "grades") {
tabChoice = (
Copy link

@github-learning-lab github-learning-lab bot Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<Table
tableNames={this.state.assignments}
rows={this.state.students}
addFunction={this.addGrade}
data={this.state.grades}
/>
);
}

return (
<div>
<div className="Box Box--spacious f4">
<div className="Box-header">
<h3 className="Box-title d-flex flex-justify-center">GradeBook</h3>
</div>
Copy link

@github-learning-lab github-learning-lab bot Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

App with header

⌨️ 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.

</div>
<nav className="UnderlineNav d-flex flex-justify-center">
Expand Down
7 changes: 4 additions & 3 deletions src/List.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ class List extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
value: "",
};

this.handleChange = this.handleChange.bind(this);
Expand All @@ -17,7 +17,7 @@ class List extends React.Component {

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

this.props.addFunction(this.state.value);
Expand All @@ -27,7 +27,8 @@ class List extends React.Component {
render() {
return (
<div className="col-6 mx-auto">
<p className="h2">REPLACE THIS TITLE WITH A PROP</p>
{/*Replace the code below to call the title prop*/}
Copy link

@github-learning-lab github-learning-lab bot Sep 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<p className="h2">{this.props.title}</p>
<form onSubmit={this.handleSubmit}>
<label>
<input
Expand Down