Merge branch 'react-upgrade'

lab2/DO_NOT_README.md

@@ -1,35 +1,41 @@
 # Lab 2 Solutions
 
 ## Task 2
+
 I `App.js`:
+
 ```javascript
-    <List title={'Users'} items={/*TODO: Task 4 */[]}/>
+<List title={"Users"} items={/*TODO: Task 4 */ []} />
 ```
 
 ## Task 3
+
 I `App.js`:
+
 ```javascript
-    changeBackgroundColor = (e) => {
-        const color = e.target.value;
-		this.setState({
-			bgColor: color
-		})
-	};
+const changeBackgroundColor = (e) => {
+  const color = e.target.value;
+  setBackgroundColor(color);
+};
 ```
 
 ## Task 4
+
 I `App.js`:
+
 ```javascript
-    <List title={'Users'} items={this.state.users}/>
+<List title={"Users"} items={users} />
 ```
 
 ## Task 6
+
 I `List.js`:
+
 ```javascript
     render() {
         ...
-        {this.props.items.length > 0 && 
-            this.props.items.map((item, index) => (
+        {items.length > 0 &&
+            items.map((item, index) => (
                 <li className="list-group-item" key={index}>{item.name}</li>
             ))
         }
@@ -38,22 +44,25 @@ I `List.js`:
 ```
 
 ## Task 7
+
 I `List.js`:
+
 ```javascript
-    onKeyPressed = (e) => {
-		this.setState({
-			searchTerm: e.target.value
-		})
-	};
+const onKeyPressed = (e) => {
+  const searchTerm = e.target.value;
+  setSearchTerm(searchTerm);
+};
 ```
 
 ## Task 8
+
 I `List.js`:
+
 ```javascript
     render() {
         const filteredItems = this.filterListItemsBySearchTerm(this.state.searchTerm);
         ...
-        {this.props.items.length > 0 && 
+        {filteredItems.length > 0 &&
             filteredItems.map((item, index) => (
                 <li className="list-group-item" key={index}>{item.name}</li>
             ))

lab2/README.md

@@ -1,20 +1,22 @@
 # Lab 2
 
 ## Starta applikationen för Lab 2
+
 Från projektroten: `$ cd lab2`, `$ npm install` följt av `$ npm start`. Gå sedan in på http://localhost:3000/ för att öppna upp applikationen.
 
 ## Uppgift
+
 1. Bekanta dig med hur applikationen är uppbyggt komponentmässigt. Utgå från `App.js`.
-2. Byt titel ("*Insert title") på `List`-komponenten genom att skicka in ett annat värde för rätt `prop`.
+2. Byt titel ("\*Insert title") på `List`-komponenten genom att skicka in ett annat värde för rätt `prop`.
 3. Just nu går det inte att byta bakgrundfärg. Komponenten `App.js` har ett `state` för sidans bakgrundsfärg (`bgColor`). Använd callbacken från `BackgroundColorPicker` för att få färgväljaren att fungera. Hur sätts själva färgen?
 4. Skicka in en lista med användare som `prop` till komponenten `List`. Hur hämtas listan med användare?
-5. Användarna syns fortfarande inte listade. Använd __React Devtools Extension__ för att verifiera att komponenten `List` har fått in en lista med användare.
-6. Rendera ut lista med användare i funktionen `render()` i komponenten `List.js`. Använd `.map(...)` för detta (hint: kika i `BackgroundColorPicker` om du kör fast).
+5. Användarna syns fortfarande inte listade. Använd **React Devtools Extension** för att verifiera att komponenten `List` har fått in en lista med användare.
+6. Rendera ut lista med användare i `return()` i komponenten `List.js`. Använd `.map(...)` för detta (hint: kika i `BackgroundColorPicker` om du kör fast).
 7. Nu vill vi kunna filtera listan. I `List.js` använader vi komponenten `SearchBar` som tar en callback, `onKeyPressed`. Vad vill vi göra då? Implementera `onKeyPressed()` i `List.js`!
-8. Nu när `List.js` känner till söktermen vill vi filtrera listan av användare. Det finns en metod `filterListItemsBySearchTerm()` som gör just detta. Tilldela konstanten `filteredItems` och iterera över denna istället för `this.props.items`.
-
+8. Nu när `List.js` känner till söktermen vill vi filtrera listan av användare. Det finns en metod `filterListItemsBySearchTerm()` som gör just detta. Tilldela konstanten `filteredItems` och iterera över denna istället för `items`.
 
 ## Jag har tid över, vad gör jag nu?
+
 1. Hjälp en vän.
 2. Utöka liskomponenten till att innehålla lite mer detaljerad användarinformation för varje item i listan.
 3. Ta en kaffe ☕️