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.

CodePudding user response：

You need to move the wrapper outside the map. I usually set the wrapper styling to display: grid; Check my changes: https://codesandbox.io/s/upbeat-voice-pf8pst?file=/src/App.js