Accessing a property that is also an Array {React, Javascript} returns undefined

Question

This might looks stupid, but i'm lost. I want to Map through countries and regions array. I have a Countries Array that also includes Region's Array. I can access the Countries Array, but when i try to access the Regions Array i returned from the Countries Array, it returns undefined. Here is a minimal example.

Full code on CodeSandBox

const Countries = [
  {
    countryName: "Afghanistan",
    countryShortCode: "AF",
    regions: [
      {
        name: "Badakhshan",
        shortCode: "BDS",
      },
      {
        name: "Badghis",
        shortCode: "BDG",
      },
      {
        name: "Helmand",
        shortCode: "HEL",
      },
      {
        name: "Herat",
        shortCode: "HER",
      },
      {
        name: "Jowzjan",
        shortCode: "JOW",
      },
      {
        name: "Kabul",
        shortCode: "KAB",
      },
      {
        name: "Kandahar",
        shortCode: "KAN",
      }
    ],
  },
  {
    countryName: "Åland Islands",
    countryShortCode: "AX",
    regions: [
      {
        name: "Brändö",
        shortCode: "BR",
      },
      {
        name: "Eckerö",
        shortCode: "EC",
      },
      {
        name: "Sund",
        shortCode: "SD",
      },
      {
        name: "Vårdö",
        shortCode: "VR",
      },
    ],
  }
]

const mappedCountries = Countries.map(({ regions }) => regions);
const mappedRegion = mappedCountries.map(({ name }) => name);

console.log(mappedCountries);
console.log(mappedRegion);

ok, it seams to be easy, but can you show us the arrays please — Ahmad MOUSSA
– Ahmad MOUSSA, Commented Nov 19, 2020 at 15:22
mappedCountries is an array of arrays of objects, so you need to iterate deeper. — pilchard
– pilchard, Commented Nov 19, 2020 at 15:27
Please read Something on my web site doesn't work. Can I just paste a link to it?. Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a minimal reproducible example and put it in the question itself instead. Stackoverflow does support inline live demos — Quentin
– Quentin, Commented Nov 19, 2020 at 15:28
@pilchard please avoid adding code found on external sites to SO even if the OP linked to it. You might be in breach of license. It's better to allow OP to make that change. See also When should I make edits to code? — VLAZ
– VLAZ, Commented Nov 19, 2020 at 16:03

Luke · Accepted Answer · 2020-11-19 15:26:28Z

1

you are returing an array in the map method. so the result is an array of arrays.

you need to flatten your result. an easy alternative would be using reduce

const mappedCountries = Countries.reduce((memo, { regions }) => [...memo, ...regions], []);
const mappedRegion = mappedCountries.map(({ name }) => name);

answered Nov 19, 2020 at 15:26

Luke

8,4173 gold badges24 silver badges36 bronze badges

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

2 Comments

AbdulAzeez Olanrewaju Over a year ago

You nailed it!... Thanks Man!

Piyush Rana Over a year ago

You can change your condition inside map like this -

Piyush Rana · Accepted Answer · 2020-11-19 15:55:16Z

1

You can change your condition inside second map like this to access region's name - mappedCountries.map(e => e.map(({name}) => name))

answered Nov 19, 2020 at 15:55

Piyush Rana

6675 silver badges8 bronze badges

1 Comment

Luke Over a year ago

but this will also return an array of arrays, and not just one single array with names in it.

Collectives™ on Stack Overflow

Accessing a property that is also an Array {React, Javascript} returns undefined

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related