hexademical codes.

06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js

@@ -1,47 +1,50 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
+const numbers = [];
 
-// importing data
+for( let i=0; i <= 31; i++ ){
+    numbers.push(i);
+}
 
-import { countriesData } from './data/countries'
+const listContainer = {
-import { tenMostHighestPopulations } from './data/ten_most_highest_populations'
+    display:'flex',
+    flexWrap: 'wrap',
+    maxWidth: '980px',
+    margin: '0 auto'
 
-const countries = [
+}
-  { name: 'Finland', city: 'Helsinki' },
-  { name: 'Sweden', city: 'Stockholm' },
-  { name: 'Denmark', city: 'Copenhagen' },
-  { name: 'Norway', city: 'Oslo' },
-  { name: 'Iceland', city: 'Reykjavík' },
-]
 
-// Country component
+const listItemEven = {
-const Country = ({ country: { name, city } }) => {
+    padding: '3rem',
-  return (
+    width: 150,
-    <div>
+    height: 150,
-      <h1>{name}</h1>
+    backgroundColor: 'crimson'
-      <small>{city}</small>
-    </div>
-  )
 }
 
-// countries component
+const listItemOdd = {
-const Countries = ({ countries }) => {
+    padding: '3rem',
-  const countryList = countries.map((country) => (
+    width: 150,
-    <Country key={country.name} country={country} />
+    height: 150,
-  ))
+    backgroundColor: 'green'
-  return <div>{countryList}</div>
 }
 
 // The App, or the parent or the container component
 // Functional Component
 const App = () => {
+
   return (
     <div className='app'>
-      <div>
+        <ul style={listContainer}>
-        <h1>Countries List</h1>
+            {
-        <Countries countries={countries} />
+                numbers.map( number => {
-      </div>
+                    if(number % 2 === 0 ){
+                        return <li key={number} style={listItemEven}>{number}</li>
+                    } else if( number % 2 === 1 ){
+                        return <li key={number} style={listItemOdd}>{number}</li>
+                    }
+                })}
+        </ul>
     </div>
   )
 }