This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Select and submit a number rating
- See the "Thank you" card state after submitting a rating
- Solution URL: github.com/PhilJG/react-interactive-rating-component)
- Live Site URL: react-interactive-rating-component
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- React Hooks
This was my first project working with React hooks.
To see how you can add code snippets, see below:
export default function NumberRating({rating, setRate}) {
return (
<RatingBtns setRate={setRate} rating={rating} />
);
}
function RatingBtns({ rating, setRate }) {
const ratings = [1, 2, 3, 4, 5];
const ratingsItems = ratings.map((r) => (
<button
//By providing a unique key prop to each button element, you are helping React to identify each element uniquely and optimize the rendering performance.
key={r}
className="ratings-selection"
//By wrapping the setRate function call inside an arrow function, to delay the execution of the function until the button is clicked and you are not directly updating the state of the App component while it is still rendering.
onClick={() => setRate(r)}
>
{r}
</button>
));
return <div
className="ratings-selection-list">
{ratingsItems}
</div>;
}
More to learn in react and styling was less of a focus on this project though colorin came out funny and didn't line up with the mockups to begin with
- React Documentation - The best way to learn react imo
- Website - Phil J Gray
- Frontend Mentor - @PhilJG
- LinkedIn - Philip Gray