diff --git a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js b/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js index f1028f1..eeff30f 100644 --- a/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js +++ b/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 ( -
-

{name}

- {city} -
- ) +const listItemEven = { + padding: '3rem', + width: 150, + height: 150, + backgroundColor: 'crimson' } -// countries component -const Countries = ({ countries }) => { - const countryList = countries.map((country) => ( - - )) - return
{countryList}
+const listItemOdd = { + padding: '3rem', + width: 150, + height: 150, + backgroundColor: 'green' } // The App, or the parent or the container component // Functional Component const App = () => { + return (
-
-

Countries List

- -
+
) }