Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

208
Views
How to add additional information to an array based on dynamic values in ReactJS

I'm trying to add a little tracking component that brings in a tracking number and carrier from an array. From there, it should add a url to the carrier website. I need to add an if statement or something so when it sees a specific carrier, it adds the url but I'm struggling.

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>
    );
}

Here is the data I'm receiving from 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"
}
]

Any help would be awesome.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Try to map the array like this

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

and when you loop through this it would be like :

<a href="{i.url }">...</a>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!