Skip to content
Submitted almost 2 years ago

URL shortening API landing page

Beshoy S.•460
@BeshoyS
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...URL shortening API landing page
  • HTML
  • CSS
  • JS
  • API
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hi Everyone, This is my current practice using react, typescript and sass. I have a problem with the copy button, when I click one button from the list all other controls on the list change the style, please let me know if someone has a fix for it.

Feedback is appreciated and welcomed.

Community feedback

  • Allan Martinez•200
    @allmtzPosted almost 2 years ago

    Really nice job and congratulations on completing the challenge !

    As to your question: It looks like the problem is that all the Button components render based on the same isCopied variable:

    title={ isCopied ? "Copied!" : "Copy" }

    As a result, when the value of isCopied changes, every Button is affected . Instead, You need a way to uniquely identify if an individual Button is copied or not. For example:

    title={ uniqueBtnID === copiedID ? "Copied!" : "Copy" }

    You could set the state of copiedID whenever a button is clicked. I submitted a pull request with a possible fix, let me know if it helps !

    Marked as helpful
    1
    Beshoy S.•460
    @BeshoySPosted almost 2 years ago

    @ramenDiet Thank you for the solution, I understand the problem, and I merged the request.

    0

Please log in to post a comment

Log in with GitHub

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