0

Estoy tratando de renderizar una array de objetos de partidos, cada partido tiene una fecha, lo que quiero es mostrar la fecha como titulo y seguido los partidos correspondientes a esa fecha, luego continuar con las demás fechas.

Date_match: Desde la BD viene como un string con formato Año/Mes/Dia, pero en la BD es de tipo Date

Este es el código de la lista de partidos. El componente Match simplemente muestra los detalles del partido.

const MatchList = () => {

    const matchs = useMatch()
    
    return (
       <div>
          <h1 className=''>Match List</h1>
          {matchs.map((m) => (
              <div>
                  <h1>{m.date_match}</h1>
                  <Match key={m.id} matchDetails={m} />
              </div>
           
          ))}
       </div>
   )
}

Este es el resultado de mi código hasta ahora.

introducir la descripción de la imagen aquí

Y esta imagen muestra como quiero se vea la lista de partidos

introducir la descripción de la imagen aquí

4
  • ¿Qué tipo de dato es el campo date_match?
    – Jacobo
    el 13 may. 2022 a las 19:21
  • Desde la BD viene como un string con formato Año/Mes/Dia, pero en la BD es de tipo Date el 13 may. 2022 a las 19:23
  • Ok, entonces a tu JS ya llega como un string, es correcto?
    – Jacobo
    el 13 may. 2022 a las 19:25
  • Si, es correcto. el 13 may. 2022 a las 19:26

1 respuesta 1

1

Lo que debes de hacer es agrupar los partidos por fecha. Esto puedes hacerlo usando un diccionario, y dado que la fecha de los partidos es un String, puedes ocupar dicho String como la llave de cada entrada del diccionario.

El diccionario estaría compuesto por la fecha como llave, y un arreglo como el valor a guardar. Dicho arreglo contendrá cada uno de los partidos que se llevan a cabo en dicha fecha.

Una vez que ya estén agrupados, iteras las llaves del diccionario, para que puedas usar la fecha/llave como el título, y posteriormente, haces una iteración del valor de esa llave en el diccionario, es decir, el arreglo donde están agrupados todos los partidos en una misma fecha.

const MatchList = () => {

    const matchs = useMatch()

    const matchsDictionary = {}

    // Crea un diccionario donde la llave sea la fecha y
    // el valor un array vavció para guardar los partidos.
    for (let i = 0; i < matchs.length; ++i)
        matchsDictionary[matchs[i].date_match] = []
  
    // Ya que tenemos el diccinario, con las fechas,
    // iteramos nuevamente para guardar cada partido 
    // en el diccionario y agruparlo con los otros partidos en
    // la misma fecha.
    for (let i = 0; i < matchs.length; ++i) {
        let match = matchs[i];
        matchsDictionary[match.date_match].push(match)
    }

    // Object.hasOwn puede utilizarse para no iterar dos veces
    // pero algunos navegadores no lo soportan.
    
    return (
       <div>
          <h1 className=''>Match List</h1>
            {
              Object.keys(matchsDictionary).map((match_date) => (
                <div>
                  <h1>{match_date}</h1>
                  matchsDictionary[match_date].map((m) => (
                    <Match key={m.id} matchDetails={m} />
                  ))
                </div>
              ))
            }
       </div>
   )
}
1
  • 1
    Maestro, Sensei, muchas gracias. Tu respuesta funcionó, arrojó el resultado que quería. Todos los días se aprende algo nuevo. 💞 el 13 may. 2022 a las 20:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.