Aktualizace kontextu v Reactu

V této lekci se podíváme na aktualizaci komponent při změně hodnoty kontextu. Předpokládejme, že budete chtít, aby se kontext měnil.

V tomto případě je užitečné používat kontext ve spojení se stavy. Pojďme trochu upravit naši aplikaci s krabičkami, kterou jsme dělali v minulé lekci a uděláme to, aby po kliknutí na tlačítko předávaná hodnota změnila na 'metal box :)'.

Takže, vezmeme náš soubor App a po BigBox nakreslíme tlačítko:

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

Dále importujeme hook useState a zavedeme state name, jehož hodnota se bude měnit po kliknutí na tlačítko. Nastavíme mu počáteční hodnotu tu, kterou jsme ihned předávali hodnotou kontextu, tedy 'small box :)':

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

Tentokrát kontextem budeme předávat ne řetězec, ale state name:

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

Jako poslední krok budeme volat obsluhu kliknutí na tlačítko a pomocí funkce setName nastavovat novou hodnotu stavu na 'metal box :)'. Poté bude možné kliknout na tlačítko a vyzkoušet výsledek:

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

Použijte aplikaci, kterou jste vytvořili při řešení úloh k předchozí lekci. Zaveďte state age, který budete místo čísla předávat pomocí kontextu z App, nastavte mu počáteční hodnotu 50. Přidejte pod komponentu Parent v App tlačítko, při každém kliknutí na které se hodnota stavu age sníží o 2.