Dlaczego funkcja del i edit wykonują się przy załadowaniu strony i przy każdynm event jak są onCLick

Question

const del = () => {
		// <--historia -->
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
		console.log(`deleted product ${productNum} ${time}`);
		//<-- end ->>
		setCheat(!cheat);
		//usuń produkt
		// dynamicProduct.filter((e) => {
		// 	return e.key !== event;
		// });
	};
	const edit = () => {
		// <--historia -->
		var today = new Date();
		var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
		console.log(`edited product ${productNum} ${time}`);
		//<-- end ->>
		// edit value form p
	};
	return (
		
				<div>
					<h1>Products</h1>
					<div className="product--container">
						{cheat ? (
							<div className="one-product">
								{dynamicProduct.map((product) => (
									<Product
										key={productNum}
										CampaignName={product.campaignName}
										Keywords={product.keywords}
										BigAmount={product.bigAmount}
										CampaignFound={product.campaignFound}
										OnOff={product.onOff}
										Town={product.town}
										Radius={product.radius}
									/>
								))}
								<button className="product--edit" onClick={edit()}>
									&#x270E;
								</button>
								<button className="product--delete" onClick={del()}>
									&#x2718;
								</button>
							</div>
						) : null}
					</div>
				</div>
	
		
	);
}

Funkcja del i edit maja się odpalać po kliku a one same tak o co kązdy event  

Answer 1

Ponieważ do onClick masz przekazać funkcje, a nie ją tam wywoływać, dlatego edit() i del() zamień na edit i del