diff --git a/lab2/README.md b/lab2/README.md index 98dd982..864a375 100644 --- a/lab2/README.md +++ b/lab2/README.md @@ -12,11 +12,11 @@ Från projektroten: `$ cd lab2`, `$ npm install` följt av `$ npm start`. Gå se 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 `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`! +7. Nu vill vi kunna filtrera listan. I `List.js` använder 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 `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. +2. Utöka List-komponenten till att innehålla lite mer detaljerad användarinformation för varje item i listan. 3. Ta en kaffe ☕️ diff --git a/lab3/README.md b/lab3/README.md index 1dceb45..59e31ca 100644 --- a/lab3/README.md +++ b/lab3/README.md @@ -11,7 +11,7 @@ Från projektroten: `$ cd lab3`, `$ npm install` följt av `$ npm start`. Gå se 3. Användarna visas inte i listan just nu. Börja med att dispatcha ett action när användare har hämtats asynkront i `userActions`. 4. När vi har dispatchat en action måste vi hantera den i våra reducers. Öppna `userReducers.js` och stoppa in resultatet från din nya action i applikationens state. 5. I `Container.js` har vi nu möjlighet att dipatcha actions tack vare vår hooks `useDispatch()`. Vi vill här hämta alla användare när komponenten mountas i `useEffect()` med vår nyss implementerade action creator. Implementera detta och bekräfta att det fungerar med Redux Dev Tools. -6. Nu när vi har användaran i vår store vill vi kunna läsa dom i komponenten `List.js`. Deklarera konstanten `users` i `List.js` med hjälp av `useSelector()`. Just nu är den bara en tom array. _Hint: Hur används `useSelector()` i `container.js`?_ +6. Nu när vi har användaren i vår store vill vi kunna läsa dom i komponenten `List.js`. Deklarera konstanten `users` i `List.js` med hjälp av `useSelector()`. Just nu är den bara en tom array. _Hint: Hur används `useSelector()` i `container.js`?_ 7. Nu ska applikationen fungera fullt ut! ## Del 2 - Egen komponent @@ -22,8 +22,8 @@ För att lösa uppgiften behöver du: - Skapa en ny komponent `` (eller liknande namn) och använda denna i `Container.js`. - `` behöver rendera ut JSX för detaljerad användardata. -- Skapa en ny action creator i `userActions.js` som tar in ett id och gör ett asynkront anrop mot `api.js` för att hämta ut detlajerad användardata. -- Utöka state för `userReducers.js` till att även innehålla detaljerad användardata och handera en ny typ av inkommade action. +- Skapa en ny action creator i `userActions.js` som tar in ett id och gör ett asynkront anrop mot `api.js` för att hämta ut detaljerad användardata. +- Utöka state för `userReducers.js` till att även innehålla detaljerad användardata och hantera en ny typ av inkommande action. - Dispatcha ett nytt action för detaljerad användardata från `onItemClick()` i `List.js` via `useDispatch()`. - Läsa in den detaljerade användardatan från applikationens state till din nya komponent.