Design comparison
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
- @ibtihelbsPosted about 2 years ago
in ImageModal file you should replace const [index, setIndex] = useState(0);
to const [index, setIndex] = useState(props.modalImg);
0 - @MathitarazonadPosted about 2 years ago
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@FanstersPosted about 2 years ago@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 GitHubJoin 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