Usunięcie dynamicznego elementu z tablicy {react}

Question

Próbuje przyciskiem usunąć element z renderu w jednym pliku mam 

var fun = {
		del: (event) => {
			// <--historia -->
			var today = new Date();
			var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
			// console.log(`deleted product ${productNum} ${time}`);
			//<-- end ->>

			//usuń produkt
			dynamicProduct.filter((e) => {
				return e.key !== event;
			});
		}.
}

tu jest to co próbuje zrobic z tego co rozumiem to czyli towrzę nowa tablicę bez elemntu e=dynamicProduct property a event= this w del 

	dynamicProduct.filter((e) => {
				return e.key !== event;
			});

moje pytanie czy muszę tworzyć nową tablice i renderować ja od nowa w jsx

i robię z niego Globalna funkcje

<Dispatch value={fun}></Dispatch>;

i wywołuje w innym pliku który zawiera button 

	const del = Dispatch.del;
			<button className="product--delete" onClick={del(this)}>

cały kod 

codesand

 

Comments

Tak jak pisałem w Twoim poprzednim pytaniu, to wciąż wygląda bardzo dziwnie. Nie wczytywałem się, ale nie do końca widzę czemu potrzebujesz Dispatch, e.key i takie rzeczy? (Też nie do końca rozumiem czemu przekazujesz wszystkie cechy produktu do Product osobno zamiast jako jeden obiekt)

Na oko spodziewałbym się czegoś w stylu podręcznikowego

function Navbar() {
  const [products, setProducts] = React.useState([]);

  const removeProduct = index => {
    const newProducts = [...products];
    newProducts.splice(index, 1); // albo przefiltrować po ID produktu czy coś takiego
    setProducts(newProducts);
  };

i przypisać `removeProduct` do onClick tego buttona produktu?

Ale może lepiej jak ktoś z większym doświadczeniem z Reacta odpowie.