How do you align cards in a row format using semantic ui React after using the map() function

Question

When you hard code the cards it works well and they in row format, but when i try to iterate through them using the map function, it doesn't work. please help me.

  const BodyComponent = (props) => {

    const [ restaurants, setRestaurants ] = useState([
      {name: "Rolex Guy Entebbe", },
      {name: "Cafe Java Victoria Mall", },
      {name: "KFC Vicatoria Mall", },
      {name: "Niki's Pizzeria", },
      {name: "muti Restaurant", },
    ])

    return(
      <Container style={{ marginTop: "35px" }}>
        <div>
          {
            restaurants.map(restaurant => 
            <Card.Group itemsPerRow={4} stackable>
              <CardComponent />
            </Card.Group>
            )
          }       
        </div>
      </Container>
    )
  }

  export default BodyComponent

Answer 1

Looking at the documentation, it looks like you want to map Card and not Card.Group :

return(
      <Container style={{ marginTop: "35px" }}>
        <div>
            <Card.Group itemsPerRow={4} stackable>
            {
              restaurants.map(restaurant => 
                <CardComponent />
              )
            }  
            </Card.Group>     
        </div>
      </Container>
);

You also would need (most likely) pass some props to CardComponent :

<CardComponent restaurant={restaurant} />