Lesson 2 exercises

Del 1: useEffect - sortera listan

Följande komponent laddar in en lista med produkter från en API-tjänst. Listan är sorterad i fallande ordning.

Lägg till en knapp som man kan klicka på för att växla mellan sortering i stigande och fallande ordning.

Några steg på vägen

• Skapa en state-variabel för att hålla reda på sorteringen
• Skapa en knapp som togglar sorteringen
• Använd dependency array för att köra useEffect när sorteringen ändras
• Se till att rätt värde skickas till api:et, sort=asc eller sort=desc

import { useEffect, useState } from "react";

export const UseEffectSorting = () => {

    const [ data, setData ] = useState([]);

    useEffect(() => {

        const loadData = async () => {
            const res = await fetch('https://fakestoreapi.com/products?sort=desc');
            const data = await res.json();
            setData(data);
        }
        loadData();

    }, []);

    return (
        <ul>
            {data.map(item => <li key={item.id}>{item.title}</li>)}
        </ul>
    )   
}

Del 2: Parallell hämtning av data

Fortsätt på koden från ovan. Lägg till ett ytterligare api:anrop för att hämta kategorier.

fetch('https://fakestoreapi.com/products/categories');

• Använd Promise.all för att hämta båda datamängderna samtidigt.
• Använd useState för att hålla reda på båda datamängderna.
• Visa upp resultatet i två separata listor först när båda datamängderna är hämtade.

---

Del 3: useIsMobile

• Utgå ifrån kodexemplet nedan:

const [width, setWidth] = useState(window.innerWidth);

useEffect(() => {
  const handleResize = () => setWidth(window.innerWidth);
  window.addEventListener('resize', handleResize);

  // Uppstädning körs när komponenten unmountas
  // eller när dependencies ändras
  return () => window.removeEventListener('resize', handleResize);
}, []);

• Skapa en hook som returnerar true om skärmbredden är mindre än 768px
• Exempel på användning:

const isMobile = useIsMobile();