React + Next js: Cross json values in component

Question

first I'd like to thank you for your time trying to help. I am a designer and I suck at developing stuff, so I have no other option than to scream for help.

So this is the situation: I was asked to add an image (country flag) that's gonna be dynamic, in an element that fetches info from a JSON file with, among others, Resorts (one of the elements being its country's long name, i.e. Australia) and Countries (by long name and shortcode, i.e. Australia, au).

I need to get the country shortcode printed in the img src, but the resort array is only containing its long name.

The code:

This is the way the JSON file presents the information:

  {
    "Countries":[
       {"name":"Australia",
        "code":"au",
        "continent_code":"oc",
        "slug":"australia"}],
    "Continents":[
       {"name":"Oceania",
        "code":"oc",
        "slug":"oceania"}],
    "Resorts":[{
        "id":"1",
        "resort_name":"Resort Name",
        "encoded_name":"resort-name",
        ...
        "country":"Australia",
        ...}]
  }

And this is my file bit:

const DesktopResort = ({resort}) => (
    <Link href="/resort/[resort]"  as={`/resort/${resort.encoded_name}`}>
        <a target='_blank' className='resort-item'>
            <div className="resort">
                <div className="top">
                    <div className="title">{resort.resort_name}</div>
                    <img className="logo" src="/assets/img/resort-logo-sample.png" />
                    <span className="info">{`${resort.ski_network} - ${resort.region}`}</span>
                    // Down below is the "dynamic" file call
                    <img className="flag-icon" src={`/assets/img/flags/${resort.country}.svg`} />
                </div>
                <div className="arrow"><img src="/assets/img/arrow-link.png" /></div>
            </div>
        </a>
    </Link>
)

I know its badly done right now, for this australian resort my image src is /assets/img/flags/Australia.svg and what I would need to print is of course /assets/img/flags/au.svg

How would you do it?

Thanks again!

zord · Accepted Answer · 2020-04-11 18:34:26Z

1

I'd write a little helper function to look up a country code based on the country name.

Note: you'll need to handle what should happen if the country is not found, or the code is not there. I'm just defaulting to an empty string here.

const countryCode = name => {
  const country = yourData.Countries.find(country => country.name === name);
  return country && country.code || '';
};

Then use this when you're passing the src to your img.

<img 
  className="flag-icon" 
  src={`/assets/img/flags/${countryCode(resort.country)}.svg`} 
/>

answered Apr 11, 2020 at 18:34

zord

4,8333 gold badges28 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Julian Abal Over a year ago

This logic seems fine, but how should I define ' yourData '?

zord Over a year ago

You posted your JSON data without a name. I named it "yourData". 🙂Just change it to the name you already using for that.

Julian Abal Over a year ago

Thanks, total noob here!

Collectives™ on Stack Overflow

React + Next js: Cross json values in component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related