title: Props data are not rendering
body: <p>I have a problem rendering my props data<br>
  Here I'm trying to pass props to a component with mapped data from a sample data set</p>
  
  <pre><code>const weatherComponents = weatherData.items.map(weather =&gt; {
    return(
      &lt;div key={weather.forecasts.area}&gt;
        &lt;WeatherForecast 
          name={weather.forecasts.area}
          condition={weather.forecasts.forecast}&gt;
        &lt;/WeatherForecast&gt;
      &lt;/div&gt;
      )})
  return(
      {weatherComponents} )
  </code></pre>
  
  <p>This is the component</p>
  
  <pre><code>function WeatherForecast(props) {
  return(
      &lt;div&gt;
          &lt;p&gt;Name: {props.name}&lt;/p&gt;
          &lt;p&gt;Condition: {props.condition}&lt;/p&gt;
      &lt;/div&gt;
  )}
  </code></pre>
  
  <p>This is the sample data set</p>
  
  <pre><code>   {
   "area_metadata": [
     {
       "name": "Yishun",
       "label_location": {
         "latitude": 1.418,
         "longitude": 103.839
       }
     }
   ],"items": [
     {
       "forecasts": [
       {
         "area": "Yishun"
         "forecast" : "cloudy"
       }
     ]}
   ]}
  </code></pre>
  
  <p>In my browser, it shows <em>Warning: Each child in a list should have a unique "key" prop.</em> and the data are not rendering, it only appears "Name: " without the area name from the data set. Am I mapping the data in the wrong way? Help TT</p>