Submitted about 1 month ago

raiting frontend

Abdel Arocha•110

@arocha2

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of the time it took me to do it, it's getting less and less.

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

I would like to have help why when you make the component change, the image changes, it has a kind of error and it renders the star icon before rendering the image, which is what it is and I don't know why.

Community feedback

markus•2,250

@markuslewinPosted about 1 month ago

Hi!

It's due to how React chooses to update the document.

function Rating() {
  return view ? (
    <section>
      <div>
        <img src={starIcon} />
      </div>
    </section>
  ) : (
    <section>
      <div>
        <img src={imgThank} />
      </div>
    </section>
  );
}

Since both code paths render the <img /> at the same position, React chooses to only update the src of the <img />, instead of removing the old image and adding a new image. When only the src is updated, browsers can choose to hold the old image while waiting for the new image to load.

You can force React to create a new element by using the key prop. When the value of the key prop changes, the old element is removed, and a new element is created:

<img key="star" src={starIcon} />
<img key="thank" src={imgThank} />

This is explained in the docs here:

Marked as helpful

Abdel Arocha•110

@arocha2Posted about 1 month ago

Thank you, this information helped me a lot. @markuslewin

Please log in to post a comment

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