title: Map Javascript array of countries into new array
body: <p>Alright, so I have a package <a href="https://www.npmjs.com/package/react-country-region-selector" rel="nofollow noreferrer">react-country-region-selector</a> that provides me with an array <code>CountryRegionData</code>, when I console log it, it's an array of 248 countries, </p>
  
  <p><a href="https://i.stack.imgur.com/xwTNw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xwTNw.png" alt="enter image description here"></a></p>
  
  <p>As you can see in the image for Italy for example, 0 is country name, 1 is country code, 2 is an string of cities seperated by an | and their codes seperated by an <code>~</code>.</p>
  
  <p>what I would like to do is map this array into a new one, where for each entry it's reformatted to have 3 properties, </p>
  
  <ul>
  <li><code>country_name</code> using the value in 0</li>
  <li><code>country_code</code> using the value in 1</li>
  <li><code>cities</code> containing an <strong>array</strong> which has a sub-array for each city that has <code>city_name</code> using the value before the <code>~</code> and <code>city_code</code> containing the value after the <code>~</code>.</li>
  </ul>
  
  <p>I understand this is a bit overwhelming but I'm hoping it would be possible to do using a map function.</p>
  
  <p>Thank you.</p>