How to sort API information into a grid using Chakra-UI

Question

I am trying to sort data received from an API into a grid using Chakra-UI and it simply is not working, I am new to Chakra-UI so this probably seems super simple to most people but I cannot figure it out. How do I sort these into a grid with 4 or more columns? instead of it sticking to 1 and just flowing down the page?

I've tried a few different ways but none are working for me and this is what I have currently done this time I thought I'd ask, I've left my code below to show what I currently have and a screenshot to show what is happening.

import axios from "axios";
import { chakra, Box, Image, Flex, Icon, useColorModeValue, HStack, VStack, Grid, Wrap, WrapItem, Container, Heading, Text, SimpleGrid } from "@chakra-ui/react";
import { MdHeadset, MdEmail, MdLocationOn } from "react-icons/md";
import { BsFillBriefcaseFill } from "react-icons/bs";

const Stores = ({stores}) => { if(!stores){ return <div>Loading...</div> }
    console.log(stores);
    return (
        <>
            {stores.map((store) => (
            <SimpleGrid columns={4} spacing={10} pl={6}>
                <Box height="400px">
                    <Text>{store.name}</Text>
                    <Image src={store.imageUrl} />
                    <Heading>{store.vBucks}</Heading>
                </Box>
            </SimpleGrid>
            ))}
        </>
    )
}

Stores.getInitialProps = async (ctx) => {
    try {
      const res = await axios.get("https://api.fortnitetracker.com/v1/store", { 
        headers: {
          'TRN-Api-Key' : 'XXX',
          'Access-Control-Allow-Origin' : true,
        }
      });
      const stores = res.data;
      console.log(stores)
      return { stores };
    } catch (error) {
      return { error };
    }
  };
  

  export default Stores;

Answer 1

It looks like you're mapping stores inside of the VStack component, which is causing the stores to display vertically. If you move the SimpleGrid component outside of the map function, it should give you the desired result.