Question:
I am learning React js and trying to build a product page of an E-commerce website, but I am stuck with the part where I should put the map components from a data in the same row. Here is the link for my codes.https://codesandbox.io/s/serene-glade-dvps24?file=/src/Shop.scss
What I want is to put three products in a row, but it seems like if you map an item the whole wrappers will be duplicated since they are map components. Any helps would be appreciated, thank you.
Answer:
You need to move the wrapper outside the map. I usually set the wrapper styling todisplay: grid;
Check my changes:
https://codesandbox.io/s/upbeat-voice-pf8pst?file=/src/App.jsIf you have better answer, please add a comment about this, thank you!