Aktualizacja kontekstu w React

W tej lekcji przyjrzymy się aktualizacji komponentów przy zmianie wartości kontekstu. Załóżmy, że chciałbyś, aby kontekst się zmieniał.

W tym przypadku warto zastosować kontekst w połączeniu ze stanami. Zmodyfikujmy nieco naszą aplikację z pudełkami, którą tworzyliśmy w poprzedniej lekcji i sprawmy, aby po kliknięciu przycisku przekazywana wartość zmieniła się na 'metal box :)'.

Weźmy więc nasz plik App i po BigBox narysujmy przycisk:

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

Następnie zaimportujmy hook useState i utwórzmy stan name, którego wartość będzie się zmieniać po kliknięciu przycisku. Ustawmy mu wartość początkową taką, którą od razu przekazywaliśmy wartością kontekstu, czyli 'small box :)':

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

Tym razem za pomocą kontekstu będziemy przekazywać nie łańcuch, ale stan name:

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

Jako ostatni krok wywołamy procedurę obsługi kliknięcia przycisku i za pomocą funkcji setName ustawimy nową wartość stanu na 'metal box :)'. Po tym można będzie kliknąć przycisk i sprawdzić wynik:

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

Użyj aplikacji, stworzonej przez Ciebie przy rozwiązywaniu zadań do poprzedniej lekcji. Utwórz stan age, który zamiast liczby będziesz przekazywać za pomocą kontekstu z App, ustaw mu wartość początkową 50. Dodaj pod komponentem Parent w App przycisk, przy każdym kliknięciu którego wartość stanu age będzie zmniejszać się o 2.