Assignment Next Step

Update the sections to allow edit (change instructor) and delete

Convert the section display from just a name (string) to a component

• create a Section component that takes the section object (section id and instructor id) and the list of all instructors
• initially, have this new component still just display the instructor name as a string
• be sure to put a key attribute on each Section in the Course

Convert the Section to display a dropbox and button (controlled component)

• refactor Section to show a dropbox and delete button, using the HTML/bootstrap in mockups/mockup03.html
• the dropbox is basically the same as the "Add Section" one
• however, pause here and watch the video below to learn about controlled and uncontrolled components
• because this dropbox reflects the state of the app (the sections state) it should be controlled
  • because uncontrolled components do not update with the state, the dropbox could be uncontrolled and still appear to work correctly
  • however, it wouldn't be reflecting the state, it would just be "sticking" with the selected value
  • this would be a problem if the state changed elsewhere
  • the Add Section dropbox in part3 works without state behind it because of how dropboxes work
    • the user is able to make a choice, but because it is controlled and non-editable, it reverts to "Add Section..."

Enable edit

We could create a state variable in Section for the section instructor id and update it there, just like we pushed the list of section instructors down into Course.

To show the alternative, we'll do the opposite strategy here: leave the list of sections state at the Course level and update it there.

• pass an onChange handler for the dropbox into Section from Course
• on select, call that handler, which should update the list of sections in Course
  • note that the handler needs two arguments: the section id and the selected instructor id

Enable delete

• do the same for clicking the delete button to remove a section

Assignment Final

Finish the app so that you can add new courses. This will required a state variable at the App level to hold the list of courses and be able to change it. You always have choices about where and how to store your state throughout the app. For this exercise, keep the sections state at the Course level.

Your app should look like the image below. mockups/mockup04.html has the html/css you need.

The textbox to add a new course can be uncontrolled or controlled. In the former case, the user can type freely. We only care about the value in the textbox when they click the button, and that can be retrieved (and cleared) in the handler. Making it controlled means you need a state variable and update handler to back it, and your handler can just use that state variable. Either way works in this case.

hint: using a form submit instead of just a button makes either click or enter work, which is better UX. just remember to prevent the default form handler from reloading the page.