Skip to content
Submitted over 3 years ago

Social proof section using REACT

Eric•260
@EricLDev
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there, I have a question regarding the styling of components created dynamically:

  • for the section with ratings and the section with the reviews, I created each <RatingItem> and each <ReviewItem> dynamically, mapping through an Array with all 3 ratings or reviews.
  • through (props.id) I assigned an id to each "Item" in order to style each one individually (justify-self left + center + right for ratings and align-self start + center + end for the reviews).
  • so in my CSS file I tried to select each Item by its #id, but it didn't work.
  • I found a working solution using the :nth-child() pseudo-selector.

why can't I use the #id as such? or how can I use it correctly?

thanks in advance for any help

Code

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Eric'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