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'
-import { tenMostHighestPopulations } from './data/ten_most_highest_populations'
+const listContainer = {
+    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 Country = ({ country: { name, city } }) => {
-  return (
-    <div>
-      <h1>{name}</h1>
-      <small>{city}</small>
-    </div>
-  )
+const listItemEven = {
+    padding: '3rem',
+    width: 150,
+    height: 150,
+    backgroundColor: 'crimson'
 }
 
-// countries component
-const Countries = ({ countries }) => {
-  const countryList = countries.map((country) => (
-    <Country key={country.name} country={country} />
-  ))
-  return <div>{countryList}</div>
+const listItemOdd = {
+    padding: '3rem',
+    width: 150,
+    height: 150,
+    backgroundColor: 'green'
 }
 
 // The App, or the parent or the container component
 // Functional Component
 const App = () => {
+
   return (
     <div className='app'>
-      <div>
-        <h1>Countries List</h1>
-        <Countries countries={countries} />
-      </div>
+        <ul style={listContainer}>
+            {
+                numbers.map( number => {
+                    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>
   )
 }