In-Class exercise: React: Changing Data

1. Clone this React project from GitHub (https://github.com/nrhodes-hmc/cs124fa21-react-change-data.git). The app displays a list of people (clicking on a person selects it).

   If you are using WebStorm:

   1. Click New/Project from Version Control...
   2. Enter the URL (https://github.com/nrhodes-hmc/cs124fa21-react-change-data.git) into the URL field.
   3. Click Clone and a new WebStorm project will be created.
   4. In the popup at the lower right titled "Install dependencies", click on Run 'npm install'
   5. To prepare to run the app (one-time), setup an 'npm start' configuration:
      1. Click on "Add Configuration..." at the top-right of the window.
      2. Click on "Add new run configuration..." in the "Run/Debug Configurations" dialog.
      3. Click on "npm" from the "Add New Configuration" popup.
      4. Change the "name" field from run to npm start.
      5. In the "scripts" field, click the triangle and choose start.
      6. Click "OK".
   6. Click the right-arrow next to "npm start" in the top-right of the window to start your app running.

   If you are not using WebStorm:

   1. clone the repository
   2. run npm install
   3. run npm start
2. Add a "Delete selected" button that will delete the selected person.

Hints:

• Should the button be displayed if there's no selected person?
• The people data are state information of the App, thus you'll need to call setData from the App. Make sure you don't change the contents of data; it should be immutable. Consider using the filter method.
• The button will need to use the information about what is selected, so will need to be a child of the People.
3. Make the name field be editable.

   Suggested order:

   1. First, make the name be an input tag that displays the correct value.

   Hint: An input tag can have a value attribute that specifies the initial value of the field.

   2. Then, add an onChange attribute that prints the edited value to the console.
   Hint: An onChange callback for a text field gets an event parameter; event.target.value contains the new value.
   3. Finally, make the onChange actually cause the underlying data to be updated.

      Hint: Create a handleChangeField(personId, field, value) function in the App which is responsible for updating the data to reflect that the given field of the given personId has a new value.

4. Make each of the fields of the person be editable.

   Hint: don't just copy and paste the name JSX because that'll cause lots of duplication between the three JSX input fields. Instead, create a new component (PersonField, perhaps) to capture the commonality.

5. Challenge: add an "Add" button that will create a new empty person.

   Hint: use generateUniqueID() to initialize the id field of the new person.