3

Lo que deseo es que dentro de mi array quiero mapear las imagenes (en este caso imageTerms), eso lo puedo hacer normal, pero o que busco es que quiero que se muestre de menor a mayor, dependiendo de la prioridad que tengo en el objeto priority.

Este es mi array

0:
description: "Interbank"
descriptionTerms: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
image: "49e5d62a-d884-47b3-8855-e658170aaef9___8e988904f62f8b6d32e7c0d6b6a553fe.png"
imageTerms: "7e4b6bf7-966d-4735-9471-9b5603b72186___8e988904f62f8b6d32e7c0d6b6a553fe.png"
linkTerms: "https://www.realplaza.com/terminos-y-condiciones/descuento-interbank"
priority: {value: "2", label: "2"}
titleTerms: "¡Promo crédito Interbank!"
[[Prototype]]: Object
1:
description: "BBVA"
descriptionTerms: "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet."
image: "0cae5c1a-2044-4ccb-b770-bd735a0948e9___43cba8cb0900ace28b862e935822e828.png"
imageTerms: "690c2e16-97aa-4a8b-8b47-5d818307ba95___b1c731760d3e57839a89667b04edf308.png"
linkTerms: "https://www.realplaza.com/terminos-y-condiciones/descuento-interbank"
priority: {value: "1", label: "1"}
titleTerms: "¡Promo crédito BBVA!"
[[Prototype]]: Object

Al mapear las imagenes, me pinta primero el de interbank (prioridad 2) y el segundo el de BBVA (prioridad 1), lo que deseo saber es como puedo mapearlo dependiendo de la prioridad de menor a mayor que se vea primero el de BBVA ya que tiene prioridad 1 y el segundo Interbank ya que tiene prioridad 2 y si es que tiene otra prioridad mayor pues se ordene de menor a mayor dependiendo de la prioridad , por ahora solo tengo este codigo.

          {badgesImagesUrl.map((badgeImage: any, index: number) => (
            <div className={tooltipContainer()} key={`${index}-icon`} onClick={(e) => {
              e.stopPropagation(),
                e.preventDefault(),
                setModalTerms(badgeImage),
                setOpen(true)
            }}>

              <Image
                src={`https://realplaza.vtexassets.com/assets/vtex.file-manager-graphql/images/${badgeImage?.image}`}
              />
              <span className={tooltip()}>{badgeImage?.description}</span>
            </div>
          ))}

Espero me puedan ayudar , muchas gracias !

1 respuesta 1

4

Puedes hacerlo de varias formas, te voy a presentar dos:

Ordenar primero el Array

Puedes ordenar el array utilizando sort, ejemplo:

const array = [
  {name: "FirstBank", priority: {value: 1, label: 1}},
  {name: "SecondBack", priority: {value: 0, label: 0}},
]

console.log(array.sort((a, b) => {
  return a.priority.value - b.priority.value
}))

Luego hacer el render con el map normalmente como lo haces. El sort es recomendable que lo hagas siempre que cambie tu Array, es decir, no lo utilices en el render, si no utilízalo por ejemplo en useEffect.

useEffect(() => {
    propBadges.sort(((a, b) => {
        return a.priority.value - b.priority.value
    })

    setStateBadges(propBadges)
}, [propBadges])

Lo negativo de este metodo es que deber recorrer todo tu array cada vez que cambia para ordernarlo.

Utilizar order con css

La siguiente forma es mas fácil y para mi es mucho mejor. En css hay una propiedad llamada order que ordena (valga la redundancia) los elementos del html, podrias utilizarla de esta manera:

    {badgesImagesUrl.map((badgeImage: any, index: number) => (
        <div style={{order: badgeImage.priority.value}} className={tooltipContainer()} key={`${index}-icon`} onClick= 
            {(e) => {
                e.stopPropagation(),
                e.preventDefault(),
                setModalTerms(badgeImage),
                setOpen(true)
            }}>

            <Image
                src={`https://realplaza.vtexassets.com/assets/vtex.file-manager-graphql/images/${badgeImage?.image}`}
            />
            <span className={tooltip()}>{badgeImage?.description}</span>
        </div>
    ))}

Puedes leer mas aqui: https://developer.mozilla.org/en-US/docs/Web/CSS/order

Hay diferentes formas pero estas son las que se me ocurrieron, tu prueba y elige la que creas conveniente.

1
  • Muchas gracias ! Me ayudaste bastante , no sabia esa del css , gracias ! :) Commented el 11 ago. 2021 a las 23:28

Tu Respuesta

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

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