Réactivité des états dans React

Voyons maintenant comment fonctionne la réactivité. Elle fait en sorte que lors de la modification d'un état, les changements s'affichent instantanément à l'écran.

Regardons un exemple. Supposons que nous ayons un état avec le nom d'un produit :

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

Affichons le nom du produit dans le rendu :

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

Créons maintenant un bouton, lors du clic duquel notre état sera modifié :

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

Dans le gestionnaire de clic, utilisons la fonction setName, pour définir un nouveau nom pour le produit :

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

Rassemblons tout notre code. Il en résultera qu'après avoir cliqué sur le bouton, le texte changera instantanément pour la nouvelle valeur :

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

L'utilisation de fonctions gestionnaires séparées n'est pas obligatoire. On peut utiliser une fonction fléchée anonyme :

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

Des états avec le prénom et le nom de l'utilisateur sont donnés. Affichez-les dans le rendu. Créez des boutons pour modifier ces états.