Planning the path ahead

Before we get started with the code, let’s do a little upfront design so we have a rough course of action.

The overall goal is to allow every birthday entry in the system to be modified. We’d like to reuse the existing BirthdayForm component so that it can be used for this purpose.

Figure 6.1 shows a diagram of how we could update the system to support this new feature. Each list item will have an Edit button that, when clicked, opens up a form for editing. This form replaces the text in the list item with a form. In terms of our components, the Birthday component will be switched to a BirthdayForm component:

Figure 6.1 – A mockup of editing birthdays

While in this edit mode, it makes sense to hide the form for adding a birthday and also prohibit editing other birthdays, just to ensure that there’s only ever one active form on display.

There’s one question remaining, and that’s...