Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
8
Comments
3
Rachael
@rachaelhrlm

All comments

  • Mason Dubelbeis•140
    @mdubelbeis
    Submitted about 3 years ago

    Interactive Rating Component with React and TailwindCSS

    #react#tailwind-css
    2
    Rachael•200
    @rachaelhrlm
    Posted about 3 years ago

    Hey there,

    This is looking great! 🎊

    The only thing I can think of to improve would be to update the submit button to only enable submit when a rating is selected. You could update your onFormSubmit function to only set submit to true if your selection state is not null.

    As for the issue found in the accessibility report, wrapping your Rate and Thanks components within a <main> tag should fix that up.

    Happy coding! 🐱

    Marked as helpful
  • Rodrigo Ramirez•160
    @ramirez2303
    Submitted over 3 years ago

    Interactive Rating App with React and chakraUI

    #chakra-ui#react#motion
    1
    Rachael•200
    @rachaelhrlm
    Posted over 3 years ago

    Congratulations on completing the challenge! 🎊

    This is looking good for your first try with an interactive react app!

    It would be a good idea to prevent the user from submitting the form if a rating hasn’t been selected — either by disabling your submit button when your click state is null or wrap you onSubmit handler to only update the submit state if click is not null.

    The accessibility issue from the report could also be solved by switching the wrapping react fragment in App with a main tag instead. And don’t forget to add alt to your images!

    The only other very minor thing I can think to suggest is that you could just pass ratingNumber to your handleClick call on MotionBlur since that variable already holds i+1

    I hope that helps.

    Happy coding! 🐱

    Marked as helpful
  • Leon Gonçalves•10
    @malkavianleon
    Submitted over 3 years ago

    Interactive Rating Component With React

    #react
    1
    Rachael•200
    @rachaelhrlm
    Posted over 3 years ago

    Congrats on completing the challenge! 🎊

    It might be good to stop the user from submitting the form when no rating is selected.

    E.G if your item state is still an empty string, disable the submit button.

    You could also solve the accessibility issues from the report by wrapping everything in App with a main tag rather than a react fragment. It would also help if you swapped the h2 tags with h1 to satisfy the other issue.

    I hope that helps.

    Happy coding! 🐱

    Marked as helpful
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

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub