Skip to content

Commit

Permalink
Fixes spelling errors
Browse files Browse the repository at this point in the history
  • Loading branch information
antjernberg committed Oct 25, 2021
1 parent e9ba91f commit 9322bd4
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 5 deletions.
4 changes: 2 additions & 2 deletions lab2/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 ☕️
6 changes: 3 additions & 3 deletions lab3/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -22,8 +22,8 @@ För att lösa uppgiften behöver du:

- Skapa en ny komponent `<UserDetails>` (eller liknande namn) och använda denna i `Container.js`.
- `<UserDetails>` 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.

Expand Down

0 comments on commit 9322bd4

Please sign in to comment.