Обновление контекста в 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.