adding package locks and with the new version of react-scripts, they complain if we dont have a browserlist in package.json

Author: bradwestfall

Diff for: .prettierrc

@@ -0,0 +1,3 @@
+tabWidth: 2
+semi: false
+singleQuote: true

Diff for: 1-rendering/package.json

@@ -13,5 +13,11 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

Diff for: 1-rendering/src/solution.js

@@ -38,7 +38,7 @@ const element = (
       {DATA.items
         .filter(item => item.type === "mexican")
         .sort(sortBy("name"))
-        .map(item => <li>{item.name}</li>)}
+        .map(item => <li key={item.id}>{item.name}</li>)}
     </ul>
   </div>
 );

Diff for: 2-composition/package.json

@@ -13,5 +13,11 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

Diff for: 2-composition/src/exercise.js

@@ -41,7 +41,7 @@ ReactDOM.render(
     <h1>Menu</h1>
     <ul>
       {items.sort(sortBy("name")).map(item => (
-        <li>
+        <li key={item.id}>
           {item.name} - <small>${item.price}</small>
         </li>
       ))}

Diff for: 2-composition/src/lecture.js

@@ -15,8 +15,8 @@ ReactDOM.render(
     <ul>
       {tacos
         .sort((a, b) => b.stars - a.stars)
-        .map(taco => (
-          <li style={{ margin: "10px" }}>
+        .map((taco, i) => (
+          <li key={i} style={{ margin: "10px" }}>
             <button
               onClick={() =>
                 alert(taco.name + " is my favorite!")

Diff for: 2-composition/src/solution.js

@@ -48,7 +48,7 @@ let Menu = ({ title, items }) => (
     <ul>
       {items
         .sort(sortBy("name"))
-        .map(item => <MenuItem item={item} />)}
+        .map(item => <MenuItem key={item.id} item={item} />)}
     </ul>
   </div>
 );