How to display data from an associative array in React?

Question

JavaScript

I have a problem with outputting data from an associative array inside elements. The bottom line is that I have a main array with data from various countries. It has 3 levels of nesting. 1. Country => 2. States => 3. Cities.

Example:

const countries = {
  'USA': {
    'California': {
      capital: 'Sacramento',
      founded: '9 сентября 1850'
      population: '40000000',
      motto: 'Эврика',
      anthem: 'I Love You, California',
      cities: {
        'Los-Angeles': {
          area: '1301.97',
          founded: '4 сентября 1781',
          population: '3 976 322'
        },
        'San-Diego': {
          area: '963.6',
          founded: '1769',
          population: '1 420 000'
        },
        'San-Francisco': {
          area: '600.6',
          founded: '1776',
          population: '884 363'
        }
      }
    },
    'New-York': {
      capital: 'New-York',
      founded: '1624'
      population: '19 795 791',
      motto: 'Всё выше',
      anthem: 'I Love New York',
      cities: {
        'Buffalo': {
          area: '136',
          founded: '1832',
          population: '261 310'
        },
        'Rochester': {
          area: '96.1 ',
          founded: '1803',
          population: '208 123'
        },
        'Yonkers': {
          area: '52.6',
          founded: '1646',
          population: '196 086'
        }
      }
    }
  },
  'Canada': {
    'Ontario': {
      capital: 'Toronto',
      founded: '1 июля 1867 года'
      population: '13 873 933',
      motto: 'От моря до моря',
      anthem: 'I Love You, Ontario',
      cities: {
        'Ottawa': {
          area: '2790.3',
          founded: '1850',
          population: '934 243'
        },
        'Leamington': {
          area: '508.76',
          founded: '1876',
          population: '49 741'
        },
        'Milton': {
          area: '366.61',
          founded: '17 мая 1818',
          population: '110 128'
        }
      }
    },
    'Québec': {
      capital: 'Québec',
      founded: '3 июля 1608'
      population: '8 294 656',
      motto: 'От моря до моря',
      anthem: 'I Love Québec',
      cities: {
        'Montréal': {
          area: '363.13',
          founded: '17 мая 1642',
          population: '1 942 694'
        },
        'Laval': {
          area: '96.1 ',
          founded: '1965',
          population: '401 553'
        },
        'Gatineau': {
          area: '342',
          founded: '1800',
          population: '265 349'
        },
        'Longueuil': {
          area: '122.9',
          founded: '1657',
          population: '239 700'
        }
      }
    },
    'Alberta': {
      capital: 'Edmonton',
      founded: '1 сентября 1905'
      population: '4 231 959',
      motto: 'От моря до моря',
      anthem: 'I Love Alberta',
      cities: {
        'Calgary': {
          area: '726',
          founded: '1875',
          population: '1 096 833'
        }
      }
    }
  }
}

I'd like to output the properties of a given array to individual page elements. That is, when outputting data, first of all, a block denoting the country was created (relative to this array, the 'USA' block would first be created), then child elements (also blocks) denoting a state (California) would be created inside it. And inside the child element, blocks of cities included in the internal array of the state were created (relative to California, the cities of Los-Angeles, San-Diego, San-Francisco and their data would be displayed).
In this case, the main task is to ensure that these blocks are implemented automatically, only by entering data into the main array. It is also important that the blocks are not limited to a certain amount of data. That is, let's say that in the block that renders the 'USA' country array, as many states were entered as are written in the array itself. Based on how many countries, states, and cities were included in the array, the same number of blocks were created on the page. And if you need to add a new block with a different country to the page, etc., you would need to write the corresponding data in the array. (How to implement all this from the point of view of layout is approximately clear to me, but from the point of view of functionality, I don’t really understand, since I start to get a little confused over time).

Here is a small block diagram:
(The final layout will be very different from this one, but I would like to just visualize it for ease of understanding the array data output implementations)


Initially, I used the 'map' method, but the problem is that it cannot work with multidimensional arrays, and also refer to deeply nested arrays in square brackets. Ended up giving up this way.

const countriesArray = {
  list: [
    {
      id: 1,
      countryName: "Russian Federation",
      capital: "Moscow"
    },
    {
      id: 2,
      countryName: "China",
      capital: "Beijing"
    },
    {
      id: 3,
      countryName: "Germany",
      capital: "Berlin"
    }
  ]
}

function OutCountry(props) {
  
  return (
    <div>
      <h3>Country: {props.countryName}</h3>
      <h3>Capital: {props.capital}</h3>
      <hr/>
    </div>
  )
}


function App() {
  const countryComponents = countriesArray.list.map(country => <OutCountry key={country.id} countryName={country.countryName} capital={country.capital} />)

  return (
    <div>
      {countryComponents}
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Also, I also tried to use 'Recursive Function', but in the end I didn't really get anywhere.
Maybe the problem is that I'm thinking wrong. Maybe I need to develop this idea differently and instead of a single associative array, break it into smaller components, but I'm afraid that this, sooner or later, will lead to a huge number of separate files with different arrays, in which it will be very easy to get confused, even with proper file naming.

Answer 1

Make separate components for country, province and city. Somehow so . Each of the components directly outputs data only at its level, and passes the rest to another component.