gem-hunter
Language: JavaScript
React feedback app from React course
This is a project from my React Front To Back 2022 course. It allows users to add, update and delete feedback. It uses a mock REST api with json-server.
This project goes over all of the fundamentals of React including...
The repository code here on the main branch has been updated due to bugs and issues found by students since the course was released. If you are looking for exact code from the course then please check out the originalcoursecode branch of this repository.
The updates here aim to be a reference and resource for common questions asked by students in the Udemy Q&A and for those wishing to make corrections to the project.
Before implementing json-server, when we updated feedback we didn't have feedback ID in the updItem so spreading both data and item merges the two objects so we have all the properties. After changing the code to use json-server we can instead use the data response from json-server which will have an ID. So spreading both data and item are no longer necessary.
Code changes can be seen in FeedbackContext.js
After we edit a feedback our feedbackEdit.edit state is still true meaning we
only ever edit the same feedback again even if it's a new feedback.
The simple solution is to reset feedbackEdit state after updating a feedback.
Code changes can be seen in FeedbackContext.js
handleTextChange should validate on the input value, not on state.
State will only have changed on the next render of the component, which
happens after we call setText. Our text state is not the current value of
the input so is not suitable for validating the users input. Additionally we don't need to check twice for an empty string.
Code changes can be seen in FeedbackForm.jsx
Reset sate back to default after adding a new feedback.
Code changes can be seen in FeedbackForm.jsx
Initially feedbackEdit.item.rating is undefined, so when RatingSelect first mounts we set local state in our useEffect to undefined, which is why the default rating of 10 does not show.
However there is no need for local state, useEffect or consuming context in this component as it's
just a duplicate of parent state. Relies on selected being passed as prop in FeedbackForm.jsx
Additionally here we can simplify our JSX with iteration.
Code changes can be seen in RatingSelect.jsx and FeedbackForm.jsx
The about link icon container was positioned absolute to the container meaning when lots of feedback's were added the icon would appear off to the right and not at the bottom of the page.
Code changes can be see in index.css
npm install
npm run dev
This will run JSON-server on port :5000 and React on port :3000