Transmission des états aux composants enfants dans React

Supposons que nous ayons un tableau de produits :

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

Supposons que ce tableau se trouve dans le composant Products. Enregistrons ces produits dans l'état du composant :

function Products() {
	const [prods, setProds] = useState(initProds);
}

Maintenant, parcourons les produits avec une boucle et affichons-les dans un rendu quelconque :

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			nom : <span>{prod.name}</span>,
			prix : <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

Comme vous pouvez le voir, le contenu de notre boucle map est assez complexe, surtout si le rendu du produit devient plus important par la suite. Une telle complexité rend la lecture, la compréhension et la maintenance du code difficiles.

Il serait préférable d'extraire le code responsable de l'affichage du produit dans un composant séparé. Appelons-le Product. Voici le code de notre composant :

function Product({ name, cost }) {
	return <div>
		nom : <span>{name}</span>,
		prix : <span>{cost}</span>
	</div>;
}

Utilisons maintenant à l'intérieur du composant Products dans la boucle map des composants enfants Product :

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Comme vous pouvez le voir, le code de la boucle est maintenant simplifié et est devenu plus compréhensible. De plus, l'affichage du produit est maintenant géré par un composant séparé, dans lequel nous pouvons créer, puis modifier le rendu des produits.

Techniquement, nous avons ainsi un composant parent qui possède un état avec des données, et des composants enfants qui reçoivent ces données sous forme de props et les affichent de la manière que nous souhaitons.

Dans l'état du composant Users, le tableau suivant est donné :

const initUsers = [
	{id: id(), name: 'user1', surname: 'surn1', age: 30},
	{id: id(), name: 'user2', surname: 'surn2', age: 31},
	{id: id(), name: 'user3', surname: 'surn3', age: 32},
];

Parcourez ce tableau avec une boucle et affichez tous les utilisateurs à l'écran. Créez un composant séparé User pour l'affichage de chaque utilisateur.