Ажурирање контекста у React-у

У овој лекцији ћемо размотрити ажурирање компонената при промени вредности контекста. Претпоставимо да ћете желети да се контекст мења.

У том случају је корисно примењивати контекст у вези са стањима. Хајде да мало изменимо нашу апликацију са кутијама, коју смо радили у претходној лекцији и урадимо тако да при клику на дугме прослеђена вредност постане 'metal box :)'.

Дакле, узмимо наш фајл App и после BigBox нацртајмо дугме:

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

Затим увезимо куку useState и направимо стање name, чија ће се вредност мењати при клику на дугме. Поставимо му почетну вредност онај коју смо одмах прослеђивали као вредност контекста, односно 'small box :)':

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

Овог пута контекстом ћемо прослеђивати не стринг, већ стање name:

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

Као последњи корак позваћемо руковалац клика на дугме и помоћу функције setName поставити нову вредност стања на 'metal box :)'. После тога ћемо моћи да кликнемо на дугме и проверимо резултат:

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

Користите апликацију коју сте креирали при решавању задатака из претходне лекције. Направите стање age, које ћете уместо броја прослеђивати помоћу контекста из App, поставите му почетну вредност 50. Додајте испод компоненте Parent у App дугме, при сваком клику на које вредност стања age ће се смањивати за 2.