Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

211
Vistas
Cómo agregar información adicional a una matriz basada en valores dinámicos en ReactJS

Estoy tratando de agregar un pequeño componente de seguimiento que trae un número de seguimiento y un operador de una matriz. A partir de ahí, debe agregar una URL al sitio web del operador. Necesito agregar una declaración if o algo así cuando ve un operador específico, agrega la URL pero estoy luchando.

 renderTrackingNumbers() { const { order: { tracking_info } } = this.props; const trackingNumbers = tracking_info.map((tracking_info) => ( <div key={ tracking_info.id }> <a href="{ tracking_url_should_be_added_here }">{ tracking_info.tracking_number }</a> { ' ' } - { ' ' } { tracking_info.carrier_code } </div> )); return ( <div> <h4>{ __('Tracking Numbers') }</h4> <div> { trackingNumbers } </div> </div> ); }

Aquí están los datos que recibo de GraphQL:

 [ { "tracking_number": "231300687629630", "carrier_code": "fedex" }, { "tracking_number": "1234567890", "carrier_code": "dhl" }, { "tracking_number": "1Z12345E0305271640", "carrier_code": "ups" }, { "tracking_number": "123465789123456", "carrier_code": "usps" } ]

Cualquier ayuda sería increíble.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Intenta mapear la matriz de esta manera

 arr.map(i=>{return { ...i , url:i.carrier_code==='fedex'?'www.fedex.com': i.carrier_code==='dhl'?'www.dhl.com':'you name it'}} )

y cuando recorres esto sería como:

 <a href="{i.url }">...</a>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda