# Реактивность стейтов в React

Давайте теперь посмотрим, как работает реактивность. Она делает так, что при изменении стейта изменения мгновенно отображаются на экране.

Давайте посмотрим на примере. Пусть у нас есть стейт с названием продукта:

`const [name, setName] = useState('prod');`

Выведем название продукта в верстке:

`return <div> <span>{name}</span> </div>;`

Сделаем теперь кнопку, по нажатию на которую наш стейт будет изменяться:

`return <div> <span>{name}</span> <button onClick={clickHandler}>btn</button> </div>;`

В обработчике клика используем функцию `setName`, чтобы установить продукту новое название:

`function clickHandler() { setName('xxxx'); }`

Соберем весь наш код вместе. Получится, что после нажатия на кнопку текст в спене мгновенно поменяется на новое значение:

`function App() { const [name, setName] = useState('prod'); function clickHandler() { setName('xxxx'); } return <div> <span>{name}</span> <button onClick={clickHandler}>btn</button> </div>; }`

Использование отдельных функций-обработчиков не обязательно. Можно использовать анонимную стрелочную функцию:

`function App() { const [name, setName] = useState('prod'); return <div> <span>{name}</span> <button onClick={() => setName('xxxx')}>btn</button> </div>; }`

Даны стейты с именем и фамилией юзера. Выведите их в верстке. Сделайте кнопки для изменения этих стейтов.

←→
↑