From eda60e6ade440aa7b450f02e07ee33ee8a9cf83b Mon Sep 17 00:00:00 2001
From: Jaspreet <chatabx91@gmail.com>
Date: Mon, 23 Jan 2023 21:24:06 -0600
Subject: [PATCH] Day 6, finished tutorial, will start exercises next

---
 solutions/day-06/mapping-tutorial/src/App.js  | 32 +++++++++++++++++++
 .../day-06/mapping-tutorial/src/Numbers.js    |  9 ++++++
 .../day-06/mapping-tutorial/src/Skill.js      | 11 +++++++
 .../day-06/mapping-tutorial/src/Skills.js     | 12 +++++++
 .../day-06/mapping-tutorial/src/index.css     | 17 +++-------
 .../day-06/mapping-tutorial/src/index.js      |  4 ++-
 6 files changed, 71 insertions(+), 14 deletions(-)
 create mode 100644 solutions/day-06/mapping-tutorial/src/App.js
 create mode 100644 solutions/day-06/mapping-tutorial/src/Numbers.js
 create mode 100644 solutions/day-06/mapping-tutorial/src/Skill.js
 create mode 100644 solutions/day-06/mapping-tutorial/src/Skills.js

diff --git a/solutions/day-06/mapping-tutorial/src/App.js b/solutions/day-06/mapping-tutorial/src/App.js
new file mode 100644
index 0000000..7fb3cc7
--- /dev/null
+++ b/solutions/day-06/mapping-tutorial/src/App.js
@@ -0,0 +1,32 @@
+import React from "react";
+import Numbers from "./Numbers";
+import Skills from "./Skills";
+
+const App = () => {
+    const numbers = [1,2,3,4,5];
+
+    // array of arrays
+    const skills = [
+        ['HTML', 10],
+        ['CSS', 7],
+        ['JavaScript', 9],
+        ['React', 8],
+    ]
+    return (
+        <div className="container">
+            <div>
+                <h1>Numbers List</h1>
+                <ul>
+                    <Numbers numbers = {numbers}/>
+                </ul>
+
+                <ul>
+                    <Skills skills= {skills}/> {/*pass array of arrays as property to Skills component */}
+                </ul>
+
+            </div>
+        </div>
+    )
+}
+
+export default App;
\ No newline at end of file
diff --git a/solutions/day-06/mapping-tutorial/src/Numbers.js b/solutions/day-06/mapping-tutorial/src/Numbers.js
new file mode 100644
index 0000000..50aedf6
--- /dev/null
+++ b/solutions/day-06/mapping-tutorial/src/Numbers.js
@@ -0,0 +1,9 @@
+import React from "react";
+
+const Numbers = ({numbers}) =>{
+    //modifying array to array of li JSX
+    const list = numbers.map((number) => <li key={number}>{number}</li>)
+    return list;
+}
+
+export default Numbers;
\ No newline at end of file
diff --git a/solutions/day-06/mapping-tutorial/src/Skill.js b/solutions/day-06/mapping-tutorial/src/Skill.js
new file mode 100644
index 0000000..b71e065
--- /dev/null
+++ b/solutions/day-06/mapping-tutorial/src/Skill.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+// take skill object property and assign variable names for each element of array
+const Skill = ({skill : [tech, level]}) => {
+    return (
+        // destruct elements from array into list item
+        <li>{tech} , {level}</li>
+    ) 
+} 
+
+export default Skill;
\ No newline at end of file
diff --git a/solutions/day-06/mapping-tutorial/src/Skills.js b/solutions/day-06/mapping-tutorial/src/Skills.js
new file mode 100644
index 0000000..a84de34
--- /dev/null
+++ b/solutions/day-06/mapping-tutorial/src/Skills.js
@@ -0,0 +1,12 @@
+import React from "react";
+import Skill from "./Skill";
+
+// take skills array or arrys as pararmeter
+const Skills = ({skills}) => {
+    // map through array, skill element holds an array, pass element as property to another component called Skill.
+    const skillList = skills.map(skill => <Skill skill={skill}/>)
+    // return list items for unordered list
+    return skillList;
+}
+
+export default Skills;
\ No newline at end of file
diff --git a/solutions/day-06/mapping-tutorial/src/index.css b/solutions/day-06/mapping-tutorial/src/index.css
index ec2585e..10846fc 100644
--- a/solutions/day-06/mapping-tutorial/src/index.css
+++ b/solutions/day-06/mapping-tutorial/src/index.css
@@ -1,13 +1,4 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body{
+  background-color: #47484d;
+  color: white;
+}
\ No newline at end of file
diff --git a/solutions/day-06/mapping-tutorial/src/index.js b/solutions/day-06/mapping-tutorial/src/index.js
index 2d09d58..6e4fbc5 100644
--- a/solutions/day-06/mapping-tutorial/src/index.js
+++ b/solutions/day-06/mapping-tutorial/src/index.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import  App  from './App';
 import './index.css';
 
-
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App/>);