title: List always returns undefined
body: <p>I'm extremely new to ReactJS and I have no idea what I am doing wrong but my City list always comes back undefined. The number list renders just fine. I have been fighting this for the past 3 hours and I am just stumped.</p>
  <p>Could someone please help me out?</p>
  <p>I used the create-react-app and I have removed the React.StrictMode from the index.js file. Everything I am doing is in the App.js.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import logo from './logo.svg';
  import './App.css';
  import React from 'react';
  
  console.clear();
  
  //Simple List of numbers
  let numbers = [1, 2, 3, 4, 5];
  let numberList = numbers.map((number) =&gt;
    &lt;li key={number}&gt;{number}&lt;/li&gt;
  );
  
  //we would pull something from a db and pass it to the function
  let cities = ['Boise', 'Nampa', 'Meridian', 'Caldwell'];
  let Cities = (arrayList) =&gt; {
    
    let cities = arrayList.cities;
    console.log(cities);
    let cityList = cities.map((item, index) =&gt;{
      &lt;li key={index}&gt;{item}&lt;/li&gt;
    });
    console.log(cityList);
    return(
      &lt;ul&gt;{cityList}&lt;/ul&gt;
    );
  
    /*
    return(
      &lt;ul&gt;
        {
          //You cannot use a forEach it will always return undefined. ReactJS needs a key so we can use the index of the item
          cities.map((item, index) =&gt;{
            &lt;li key={index}&gt;{item}&lt;/li&gt;
          })
        }
      &lt;/ul&gt;
    );
    */
  
  };
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;header className="App-header"&gt;
          &lt;img src={logo} className="App-logo" alt="logo" /&gt;
          &lt;h2&gt;It is {new Date().toLocaleTimeString()}&lt;/h2&gt;
          &lt;div&gt;
            &lt;h2&gt;Numbers&lt;/h2&gt;
            &lt;ul&gt;{numberList}&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h2&gt;Cities&lt;/h2&gt;
            &lt;Cities cities={cities}/&gt;
          &lt;/div&gt;
        &lt;/header&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>