With this exercise, we're going to create a survey and have some more practice creating forms. They're not exactly the easiest or most fun to create, but they're everywhere! (We could even argue that the web isn't much more than a bunch of forms). This will also give you some hands-on time with creating controlled forms in React.
- Fork this repository
- Clone the forked repository onto your local machines
- In the root directory, type
npm install, which installs dependencies for the project - Finally, type
npm run start, which starts a development server that runs your website in the browser. That server will reload your website whenever you make any changes to source files
- Make sure you check all the code that was given to you
- Add the missing form in
Main.jsx, following the templates in thetemplatesfolder - When the form is submitted, start by logging the answers to the console.
- After submitting the form, you should reset the form to its original state
- The form might look quite big, but there are opportunities here to reuse some of the components you create within the form
- Remember that in a controlled form, the state is the one keeping track of the inputs values
Store all submitted answers in state. Update Main.jsx to display all the answers using the provided AnswerList component. You will need to examine the provided components to understand the data structure they expect and what props should be passed. Note that you can also modify these components to better suit the data structure you created in the first part of the exercise.
Add an edit button to each of the answers cards. Clicking on this button should fill in the form with the current answers, and submitting the form should save the changes into the same card again.
Add a json-server to your app, and persist all the answers from the form. You still should be able to edit the form and save the new answers too. Also, add a delete button to each of the answers that will delete them from the server too.