🔐 Index as key

Index as key

README.md

@@ -195,3 +195,5 @@ export default ClassClick;
 ### [Conditional Rendering](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/blob/master/src/components/UserGreeting.js)
 
 ### [List Rendering](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/d7d48445fa9578b28fb68fc50e5cecbf5d78132d#diff-da356e7f0ec06b582f616a27e404266469bc463344c1378741025425ddf6611c)
+
+### [List and Keys](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/017b8b8f7a3121cb1efbeb6bb87b3712ed1e10a0)

src/App.js

@@ -10,11 +10,13 @@ import EvenBind from "./components/EventBind";
 import ParentComponent from "./components/ParentComponent";
 import UserGreeting from "./components/UserGreeting";
 import PersonList from "./components/PersonList";
+import NameList from "./components/NameList";
 
 function App() {
   return (
     <div className="App">
-      <PersonList />
+      <NameList />
+      {/* <PersonList /> */}
       {/* <UserGreeting /> */}
       {/* <ParentComponent /> */}
       {/* <EvenBind /> */}

src/components/NameList.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function NameList() {
+  const data = ["Ironman", "Spiderman", "Batman"];
+  let lists = data.map((data, index) => (
+    <h2 key={index}>
+      {index} {data}
+    </h2>
+  ));
+  return <div>{lists}</div>;
+}
+
+export default NameList;
+
+// When to use index as key:
+// 1) The items in your list do not have a unique id.
+// 2) The list is a static list and will not change.
+// 3) The list will never be reordered or filtered.