Day 6, finished tutorial, will start exercises next

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;

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;

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;

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;

solutions/day-06/mapping-tutorial/src/index.css

@@ -1,13 +1,4 @@
-body {
+body{
-  margin: 0;
+  background-color: #47484d;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  color: white;
-    '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;
-}

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/>);