{"id":24484350,"url":"https://github.com/sksksk2024/react-feedback","last_synced_at":"2026-05-04T16:37:54.500Z","repository":{"id":263263905,"uuid":"889809829","full_name":"sksksk2024/react-feedback","owner":"sksksk2024","description":"Put your feedback stuff","archived":false,"fork":false,"pushed_at":"2025-01-11T06:18:36.000Z","size":485,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T13:14:20.744Z","etag":null,"topics":["react","render-deployment"],"latest_commit_sha":null,"homepage":"https://react-feedback-frontend.onrender.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sksksk2024.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-17T09:48:45.000Z","updated_at":"2025-01-11T06:28:42.000Z","dependencies_parsed_at":"2024-11-18T00:15:22.548Z","dependency_job_id":null,"html_url":"https://github.com/sksksk2024/react-feedback","commit_stats":null,"previous_names":["sksksk2024/react-feedback"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sksksk2024%2Freact-feedback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sksksk2024%2Freact-feedback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sksksk2024%2Freact-feedback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sksksk2024%2Freact-feedback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sksksk2024","download_url":"https://codeload.github.com/sksksk2024/react-feedback/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243646522,"owners_count":20324582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","render-deployment"],"created_at":"2025-01-21T13:14:24.110Z","updated_at":"2026-05-04T16:37:49.453Z","avatar_url":"https://github.com/sksksk2024.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Feedback App\n\nThis 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.\n\nThis project goes over all of the fundamentals of React including...\n\n- Components\n- JSX\n- Props (proptypes, defaultprops, etc)\n- State (Component \u0026 App Level)\n- Styling\n- Handling Events\n- Lists \u0026 Keys\n- Forms\n- Context API\n- HTTP Requests\n\n---\n\n\u003c!--toc:start--\u003e\n\n- [React Feedback App](#react-feedback-app)\n  - [Bug Fixes, corrections and code FAQ](#bug-fixes-corrections-and-code-faq)\n    - [Q: Why are we spreading data and item?](#q-why-are-we-spreading-data-and-item)\n    - [BUG: After editing a feedback it is not possible to add a feedback](#bug-after-editing-a-feedback-it-is-not-possible-to-add-a-feedback)\n    - [BUG: Validation not working correctly on feedback input](#bug-validation-not-working-correctly-on-feedback-input)\n    - [Q: How do you reset state after submitting a feedback?](#q-how-do-you-reset-state-after-submitting-a-feedback)\n    - [Q: Why does the default rating of 10 not show?](#q-why-does-the-default-rating-of-10-not-show)\n    - [BUG: About link icon shows in the wrong place with many feedback items](#bug-about-link-icon-shows-in-the-wrong-place-with-many-feedback-items)\n- [Usage](#usage) - [Install dependencies](#install-dependencies) - [Run](#run)\n\u003c!--toc:end--\u003e\n\n### Bug Fixes, corrections and code FAQ\n\nThe repository code here on the main branch has been updated due to bugs and issues found by students since the course was released.\nIf you are looking for exact code from the course then please check out the [originalcoursecode branch](https://github.com/bradtraversy/feedback-app/tree/originalcoursecode) of this repository.\n\nThe updates here aim to be a reference and resource for common questions asked\nby students in the Udemy Q\u0026A and for those wishing to make corrections to the\nproject.\n\n#### Q: Why are we spreading data and item?\n\nBefore implementing json-server, when we updated feedback we didn't have feedback\nID in the updItem so spreading both data and item merges the two objects so we\nhave all the properties. After changing the code to use json-server we can instead use the\ndata response from json-server which will have an ID. So spreading both data and\nitem are no longer necessary.\n\n\u003e Code changes can be seen in [FeedbackContext.js](src/context/FeedbackContext.js#L62)\n\n#### BUG: After editing a feedback it is not possible to add a feedback\n\nAfter we edit a feedback our `feedbackEdit.edit` state is still true meaning we\nonly ever edit the same feedback again even if it's a new feedback.\nThe simple solution is to reset feedbackEdit state after updating a feedback.\n\n\u003e Code changes can be seen in [FeedbackContext.js](src/context/FeedbackContext.js#L65)\n\n#### BUG: Validation not working correctly on feedback input\n\n`handleTextChange` should validate on the input value, not on state.\nState will only have changed on the next render of the component, which\nhappens after we call `setText`. Our text state is not the current value of\nthe input so is not suitable for validating the users input. Additionally we don't need to check twice for an empty string.\n\nCode changes can be seen in [FeedbackForm.jsx](src/components/FeedbackForm.jsx#L24)\n\n#### Q: How do you reset state after submitting a feedback?\n\nReset sate back to default after adding a new feedback.\n\n\u003e Code changes can be seen in [FeedbackForm.jsx](src/components/FeedbackForm.jsx#L57)\n\n#### Q: Why does the default rating of 10 not show?\n\nInitially `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.\nHowever there is no need for local state, useEffect or consuming context in this component as it's\njust a duplicate of parent state. Relies on `selected` being passed as prop in [FeedbackForm.jsx](src/components/FeedbackForm.jsx#L64)\n\nAdditionally here we can simplify our JSX with iteration.\n\n\u003e Code changes can be seen in [RatingSelect.jsx](src/components/RatingSelect.jsx#L2) and [FeedbackForm.jsx](src/components/FeedbackForm.jsx#L64)\n\n#### BUG: About link icon shows in the wrong place with many feedback items\n\nThe about link icon container was positioned\nabsolute to the container meaning when lots of feedback's were added the icon\nwould appear off to the right and not at the bottom of the page.\n\n\u003e Code changes can be see in [index.css](src/index.css#L188)\n\n---\n\n# Usage\n\n### Install dependencies\n\n```bash\nnpm install\n```\n\n### Run\n\n```bash\nnpm run dev\n```\n\nThis will run JSON-server on port :5000 and React on port :3000\n\"# react-feedback\" \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsksksk2024%2Freact-feedback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsksksk2024%2Freact-feedback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsksksk2024%2Freact-feedback/lists"}