- 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:
- Click New/Project from Version Control...
- Enter the URL (https://github.com/nrhodes-hmc/cs124fa21-react-change-data.git) into the URL field.
- Click Clone and a new WebStorm project will be created.
- In the popup at the lower right titled "Install dependencies", click on Run 'npm install'
- To prepare to run the app (one-time), setup an 'npm start' configuration:
- Click on "Add Configuration..." at the top-right of the window.
- Click on "Add new run configuration..." in the "Run/Debug Configurations" dialog.
- Click on "npm" from the "Add New Configuration" popup.
- Change the "name" field from run to npm start.
- In the "scripts" field, click the triangle and choose start.
- Click "OK".
- 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:
- clone the repository
- run npm install
- run npm start
- 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.
- Make the name field be editable.
Suggested order:
- 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.
- 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.
- 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.
- 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.
- Challenge: add an "Add" button that will create a new empty person.
Hint: use generateUniqueID() to initialize the id field of the new person.