Aktualizácia kontextu v React

V tejto lekcii sa pozrieme na aktualizáciu komponentov pri zmene hodnoty kontextu. Predpokladajme, že budete chcieť, aby sa kontext menil.

V tomto prípade je užitočné použiť kontext v spojení so stavmi. Poďme trochu upraviť našu aplikáciu s krabicami, ktorú sme robili na minulej lekcii a urobme to tak, aby po kliknutí na tlačidlo sa prenášaná hodnota zmenila na 'metal box :)'.

Takže, vezmeme náš súbor App a po BigBox nakreslíme tlačidlo:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
			<button>click</button>
		</MyContext.Provider>
	);
}

Ďalej importujeme hook useState a vytvoríme stav name, ktorého hodnota sa bude meniť po kliknutí na tlačidlo. Nastavíme mu počiatočnú hodnotu takú, ktorú sme okamžite predávali hodnotou kontextu, teda 'small box :)':

function App() {
	const [name, setName] = useState('small box :)');
}

Tentoraz budeme kontextom predávať nie reťazec, ale stav name:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

Ako posledný krok budeme volať obsluhu kliknutia na tlačidlo a pomocou funkcie setName nastavíme novú hodnotu stavu na 'metal box :)'. Potom bude možné kliknúť na tlačidlo a skontrolovať výsledok:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

Použite aplikáciu vytvorenú vami pri riešení úloh k predchádzajúcej lekcii. Vytvorte stav age, ktorý budete namiesto čísla prenášať prostredníctvom kontextu z App, nastavte mu počiatočnú hodnotu 50. Pridajte pod komponent Parent v App tlačidlo, pri každom kliknutí na ktoré sa hodnota stavu age zníži o 2.