Reatividade de States no React

Vamos agora ver como a reatividade funciona. Ela faz com que, ao alterar um state, as mudanças sejam instantaneamente refletidas na tela.

Vamos ver um exemplo. Suponha que temos um state com o nome de um produto:

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

Vamos exibir o nome do produto no JSX:

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

Agora vamos criar um botão que, ao ser clicado, alterará nosso state:

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

No manipulador de clique, usamos a função setName para definir um novo nome para o produto:

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

Vamos juntar todo o nosso código. O resultado será que após clicar no botão, o texto mudará instantaneamente para o novo valor:

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

O uso de funções manipuladoras separadas não é obrigatório. Você pode usar uma função anônima de seta:

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

Dados os states com o nome e sobrenome do usuário. Exiba-os no JSX. Crie botões para alterar esses states.