List

bhattidev · bhattidev · commit 00469d48c0b9 · 2024-10-21T07:54:19.000-07:00
diff --git a/React_Learning/06_List/index.html b/React_Learning/06_List/index.html
@@ -6,7 +6,7 @@
 		<meta
 			name="viewport"
 			content="width=device-width, initial-scale=1.0" />
-		<title>Condition Rendering</title>
+		<title>List</title>
 	</head>
 	<body>
 		<div id="root"></div>
diff --git a/React_Learning/06_List/src/App.css b/React_Learning/06_List/src/App.css
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/React_Learning/06_List/src/App.jsx b/React_Learning/06_List/src/App.jsx
@@ -1,9 +1,30 @@
 import List from './List';
 
 function App() {
+	const fruits = [
+		{ id: 1, name: 'Apple', calories: 90 },
+		{ id: 2, name: 'banana', calories: 45 },
+		{ id: 3, name: 'mango', calories: 105 },
+		{ id: 4, name: 'coconut', calories: 159 },
+		{ id: 5, name: 'pineapple', calories: 37 },
+	];
+	const vegatables = [
+		{ id: 7, name: 'Potatos', calories: 105 },
+		{ id: 8, name: 'celery', calories: 15 },
+		{ id: 9, name: 'carrots', calories: 25 },
+		{ id: 10, name: 'corn', calories: 63 },
+		{ id: 11, name: 'broccoli', calories: 50 },
+	];
 	return (
 		<>
-			<List />
+			<List
+				items={fruits}
+				category="fruits"
+			/>
+			<List
+				items={vegatables}
+				category="Vegatables"
+			/>
 		</>
 	);
 }
diff --git a/React_Learning/06_List/src/List.jsx b/React_Learning/06_List/src/List.jsx
@@ -1,5 +1,20 @@
-function List() {
-	const fruits = ['Apple', 'banana', 'coconut', 'pineapple'];
-	return fruits;
+function List(props) {
+	const category = props.category;
+	const itemList = props.items;
+
+	const listItems = itemList.map((item) => (
+		<li key={item.id}>
+			{item.id} ) &nbsp;
+			{item.name}: &nbsp; {item.calories}
+		</li>
+	));
+	return (
+		<>
+			<h1>
+				<b>{category}</b>
+			</h1>
+			<ol>{listItems}</ol>
+		</>
+	);
 }
 export default List;
