Utilisation des états dans React

Utilisons la fonction useState pour créer un état contenant le nom du produit :

const state = useState('prod');

En conséquence, la constante state représentera un tableau, dans le premier élément duquel sera stocké le nom du produit, et dans le second - la fonction pour modifier le nom :

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

Pour la brièveté, on n'utilise généralement pas de constante intermédiaire pour le tableau, mais on utilise la déstructuration :

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

Affichons maintenant notre état avec le nom du produit dans un rendu quelconque :

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

Rassemblons tout et obtenons le code suivant :

import React, { useState } from 'react';

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

export default App;

Si on exécute ce code, initialement dans la div s'affichera la valeur initiale de l'état, dans notre cas 'prod'. Lors du changement d'état via la fonction setName, le nouveau la valeur de l'état apparaîtra automatiquement dans le rendu.

Supposons que vous souhaitiez afficher à l'écran les données de l'utilisateur : son prénom, son nom, son âge. Créez pour cela les états correspondants avec des valeurs initiales.