Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 8 months ago

Component Composition, State Management and Conditional Rendering

react, tailwind-css
tOnski86•330
@tOnski86
A solution to the Interactive rating component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

Made a few tweaks to the project so I can practice React + Tailwind CSS.

  • Conditionally render the button text to show Enter Rating when there is no rating added, and Submit when a rating is selected.
  • Added a back button to the Success page.

My focus for this project are the following:

  • Component composition in React to efficiently pass state and props.
  • Reusable components. In this project, I created 2 button variants that accept a variant props, allowing me to reuse the button component.
  • Conditional rendering. I was able to render components and styles conditionally using state.
What challenges did you encounter, and how did you overcome them?

There are a few opportunities to improve the design's accessibility and functionality, but I am focused on getting reps to practice state management in React.

What specific areas of your project would you like help with?

Feedback on the project's overall logic would be greatly appreciated! 🚀

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on tOnski86's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License