Taháky

Taháky

To nejdůležitější na jedné stránce – metody polí, hooky Reactu a TypeScript v Reactu, nahoře to nejpoužívanější. Vytiskni si je, nebo je měj otevřené vedle kódu.

Metody polí: chci… → použij

Chci…	Metoda	Vrací	Příklad
z každé položky udělat něco jiného	`map`	nové pole stejné délky	`nums.map((n) => n * 2)`
jen některé položky	`filter`	nové kratší pole	`users.filter((u) => u.active)`
první položku podle podmínky	`find`	položku, nebo undefined	`users.find((u) => u.id === id)`
obsahuje hodnotu?	`includes`	true / false	`tags.includes('react')`
aspoň jedna splňuje?	`some`	true / false	`cart.some((i) => !i.inStock)`
jednu hodnotu z celého pole	`reduce`	cokoli	`items.reduce((sum, i) => sum + i.price, 0)`
seřazenou kopii	`toSorted`	nové pole	`nums.toSorted((a, b) => a - b)`
výřez	`slice`	nové pole	`list.slice(0, 3)`
všechny splňují?	`every`	true / false	`fields.every((f) => f.valid)`
pozici první takové položky	`findIndex`	index, nebo -1	`list.findIndex((x) => x.done)`
bez duplicit	`new Set`	pole přes spread	`[...new Set(tags)]`
skupiny podle vlastnosti	`Object.groupBy`	objekt polí	`Object.groupBy(items, (i) => i.category)`

Podrobně: lekce 0.4 a lekce 0.5.

Neměnné úpravy (stav v Reactu)

Úprava	❌ Mění původní	✅ Vrací nové
přidat na konec	`arr.push(x)`	`[...arr, x]`
změnit jednu položku	`arr[i].done = true`	`arr.map((x) => (x.id === id ? { ...x, done: true } : x))`
odebrat podle id	`arr.splice(i, 1)`	`arr.filter((x) => x.id !== id)`
změnit vlastnost objektu	`obj.name = 'x'`	`{ ...obj, name: 'x' }`
přidat na začátek	`arr.unshift(x)`	`[x, ...arr]`
vnořená vlastnost	`obj.address.city = 'x'`	`{ ...obj, address: { ...obj.address, city: 'x' } }`
seřadit	`arr.sort(fn)`	`arr.toSorted(fn)`
obrátit	`arr.reverse()`	`arr.toReversed()`

Podrobně: lekce 0.9.