Estoy trabajando en una aplicación que muestra los datos de los atletas en una cuadrícula usando MUI Grid. Los colores del borde izquierdo se basan en la red social asociada con esa tarjeta.

Lo que quiero hacer es tener una columna para cada red social, una para facebook, una para instagram y otra para reddit. De esa manera cada columna tendrá tarjetas del mismo color.

Parece que no puedo entender cómo hacer esto. los datos de mi API ya están ordenados por red social, pero Mui toma los datos de mi API y agrega las tarjetas fila por fila en lugar de columna por columna.

Aquí está mi código para las tarjetas de atletas.

 import React from 'react' import { AthleteCardContainer, AthleteImage, AthleteDetailsContainer, TopContainer, BottomContainer, FBLogo, RedditLogo, InstaLogo, LinkIconLogo } from '../styles/athlete-styles' export const AtheleteCard = ({athlete}) => { function numFormatter(num) { if(num > 999 && num < 1000000){ return (num/1000).toFixed(1) + 'K'; }else if(num > 1000000){ return (num/1000000).toFixed(1) + 'M'; }else if(num < 900){ return num; } } return ( <AthleteCardContainer social={athlete.platform}> <AthleteImage src={athlete.profileImage}/> <AthleteDetailsContainer> <TopContainer> <h1>{athlete.name}</h1> <span>@{athlete.handle}</span> </TopContainer> <BottomContainer> <h3>{athlete.platform === "Instagram" ? <InstaLogo/> : athlete.platform === "Facebook" ? <FBLogo/> : athlete.platform === "Reddit" ? <RedditLogo/> : null} {numFormatter(athlete.subscriberCount)}</h3> <a href={athlete.url}><p><LinkIconLogo/>{athlete.url}</p></a> </BottomContainer> </AthleteDetailsContainer> </AthleteCardContainer> ) }

y mi código para la cuadrícula en sí

 export const Athletes = () => { const dispatch = useDispatch(); const athletes = useSelector(state => state.athleteReducer.athletes.athletes) useEffect(() => { dispatch(actions.getAthletes()); }, []) console.log(athletes, "from selector") return ( <div> <Grid container > {athletes.map(athlete => ( <Grid item xs={12} md={6} lg={4}> <AtheleteCard athlete={athlete}/> </Grid> ))} </Grid> </div> ); };