Truyền trạng thái vào các thành phần con trong React

Giả sử chúng ta có một mảng sản phẩm:

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

Giả sử mảng này nằm trong thành phần Products. Hãy ghi các sản phẩm này vào trạng thái của thành phần:

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

Bây giờ hãy lặp qua các sản phẩm bằng vòng lặp và hiển thị chúng trong một cấu trúc nào đó:

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

Như bạn thấy, nội dung của vòng lặp map khá phức tạp, đặc biệt là nếu cấu trúc sản phẩm phát triển sau này. Sự phức tạp như vậy gây khó khăn cho việc đọc, hiểu và bảo trì mã.

Sẽ tốt hơn nếu tách mã chịu trách nhiệm hiển thị sản phẩm ra một thành phần riêng biệt. Hãy gọi nó là Product. Đây là mã của thành phần chúng ta:

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

Bây giờ hãy bên trong thành phần Products trong vòng lặp map, sử dụng các thành phần con 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>;
}

Như bạn thấy, mã của vòng lặp đã được đơn giản hóa và trở nên dễ hiểu hơn. Ngoài ra, bây giờ việc hiển thị sản phẩm là do một thành phần riêng biệt chịu trách nhiệm, trong đó chúng ta có thể thực hiện, và sau đó chỉnh sửa cấu trúc sản phẩm.

Về mặt kỹ thuật, điều xảy ra là thành phần cha có trạng thái chứa dữ liệu, còn các thành phần con nhận dữ liệu này dưới dạng props và hiển thị chúng theo cách chúng ta muốn.

Trong trạng thái của thành phần Users có mảng sau:

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},
];

Hãy lặp qua mảng này bằng vòng lặp và hiển thị tất cả người dùng ra màn hình. Tạo một thành phần riêng biệt User để hiển thị người dùng.