dynamic-component.js

function App() {
	const products = [
		{ name: "Photoshop", price: "$4.00" },
		{ name: "Figma", price: "$5.00" },
		{ name: "Sketch", price: "$6.00" },
		{ name: "After Efects", price: "$26.00" },
		{ name: "Premier pro", price: "$96.00" },
	];

	return (
		<div>
			{products.map((item) => (
				<Products product={item} />
			))}
		</div>
	);
}

function Products(props) {
	return (
		<div>
			<h3>
				Name: {props.product.name}, Price: {props.product.price}
			</h3>
		</div>
	);
}