Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive ecommerce product page using ReactJS

Edmunds 170

@Fansters

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have one problem which i could not solve yet - How to open img modal using different thumbnail images. I will always open the first img on modal. And when i have opened the modal and circle trough the images and then close, the order remains the same. If you experiment yourself, you will understand what im talking about. Basically, i want to change the opening modal img whenever i chnage the thumbnail image.

Community feedback

@ibtihelbs

Posted

in ImageModal file you should replace const [index, setIndex] = useState(0);

to const [index, setIndex] = useState(props.modalImg);

0
Mathias 220

@Mathitarazonad

Posted

First of all, congrats to have completed this challenge, your solution looks amazing! Talking about your problem, I think that you could have like a global state or a state that you could pass to all childrens where you will have the selected product img selected like a number and pass that like props to the other components. So you can have functions that manage that and pass as props to the childrens to use that functions, and if you change the state it should render with the changes to all components, I would do that If I have that problem, wish this can help you!

0

Edmunds 170

@Fansters

Posted

@Mathitarazonad Hey, thanks for your feedback. I didn't mention in my question that i basically tried what you said while building the project. But that didn't exactly give me the results that i need. I left the updated version now with the global state so you can check it out. The problem now is that the bigImg and small thumbnail img''s change as well in the background, which i don't want(or atleast not to show that).

Also, this weekend ill take a look at ibtihel ben salah solution.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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