การส่ง id ไปยังคอมโพเนนต์ใน React

คุณทราบแล้วว่าแอตทริบิวต์ของแท็กคอมโพเนนต์ จะเข้าสู่พร็อพส์ นี่เป็นจริงสำหรับแอตทริบิวต์ทั้งหมด ยกเว้นแอตทริบิวต์ key ซึ่งจำเป็น สำหรับการใช้ในลูป ดังนี้:

const items = prods.map(prod => {
	return <Product
		key ={prod.id}
		name={prod.name}
		cost={prod.cost}
	/>;
});

ในกรณีนี้ แอตทริบิวต์ name และ cost จะเข้าสู่พร็อพส์ ส่วน key - จะไม่เข้าสู่ อย่างไรก็ตาม เราอาจจำเป็นต้อง ส่ง id ไปยังพร็อพส์ของคอมโพเนนต์ ใน กรณีนี้ เราจะต้องเพิ่มแอตทริบิวต์อีกหนึ่งรายการ:

const items = prods.map(prod => {
	return <Product
		key ={prod.id}
		id  ={prod.id}
		name={prod.name}
		cost={prod.cost}
	/>;
});

ปรับเปลี่ยนคอมโพเนนต์ User ของคุณ เพื่อให้แสดง id ของผู้ใช้ในพารากราฟ