Client-Side JavaScript Frameworks (React)

(Extended) Due by class time on Thu 11/13. No late penalty or late turnin.

Assignment

This is a continuation of the last assignment.

https://classroom.github.com/a/tWLRkZrM
  • clone the repository (only contains the next set of html mockups)
  • 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)