Uppdatera kontext i React

I den här lektionen kommer vi att titta på uppdatering av komponenter när kontextens värde ändras. Anta att du vill att kontexten skall förändras.

I det här fallet är det användbart att använda kontext i kombination med state. Låt oss ändra vår applikation med lådor som vi gjorde i förra lektionen och göra så att när man klickar på en knapp blir det överförda värdet 'metal box :)'.

Så, ta vår fil App och efter BigBox ritar vi en knapp:

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

Därefter importerar vi hooken useState och skapar ett state name, vars värde kommer att ändras vid klick på knappen. Låt oss ge det ett startvärde som vi omedelbart skickade som kontextvärde, det vill säga 'small box :)':

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

Den här gången kommer vi att skicka inte en sträng som kontext, utan state name:

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

Som ett sista steg kommer vi att anropa en klickhanterare för knappen och med hjälp av funktionen setName sätta ett nytt värde för state till 'metal box :)'. Efter detta kan du klicka på knappen och kontrollera resultatet:

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

Använd applikationen som du skapade när du löste uppgifterna till föregående lektion. Skapa ett state age, som du istället för ett tal kommer att skicka via kontext från App, sätt dess startvärde till 50. Lägg till under komponenten Parent i App en knapp, där varje klick på den minskar state-värdet age med 2.