Client-Side JavaScript Frameworks (React)

Part 3: Managing State Part 4: Controlled Components

Part 3 & 4 are due Thu 4/11 at class time. Update: late subs accepted until Tue 4/16 midnight.

Assignment

This is a continuation of the last assignment. The repo to submit this part only contains the next set of html mockups.

https://classroom.github.com/a/OqRkGL8Y

• clone the repository
• copy your project from the last assignment over
• test that it still works

Again, the complete app will work as shown below, with the data stored locally in the App. The final assignment will connect to a server/database API.

The useState Hook

Adding New Tasks

Assignment Next Step

Following the video example, add an Add Section... dropbox to your component

Turn the list of sections into state

• make a state variable in Course with the useState hook to hold the list of sections
• the default value for that state variable is the list passed in from App

Add the dropbox

• add it into the Course component following the HTML/bootstrap from mockups/mockup02.html
• the selected attribute on the first option is how you indicate which option is selected in HTML
• in react, remove that attribute from the option and put the attribute value={-1} on the select element instead
  • (we'll discuss this more in the next part)
• replace the hardcoded options
  • you should already have the list of all instructors passed into Course from the last part
  • use the instructor id as the option value, as in the mockup

Add a section on select

• add an onChange handler to the Add Section dropbox
• when you select an instructor, add a new section to the sections state variable
  • the component will automatically redraw with the new instuctor when you change that state variable
  • use a regular module-level counter variable in Course to generate fake section ids (the db will do this later)