Jak zrobić by productstyle mógł przyjmować classList.toggle("show-text")

Question

Mam dwa problemy jeden to nie mogę nadać productowi css show-text {display:none} ponieważ dostaje bład 

 

TypeError: Cannot read properties of null (reading 'classList')
 The above error occurred in the <ProductData> component:

 

Product 

<div className="product">
			<div className="product--style">
				<h4>Product {Props.Count} </h4>
				<button className="product--show" onClick={productRef.current.classList.toggle("show-text")}>
					&#8744;
				</button>

				<button className="product--edit" onClick={edit}>
					&#x270E;
				</button>
				<button className="product--delete" onClick={del}>
					&#x2718;
				</button>
				<div className="show-text" ref={productRef}>
					<p>Capmaing Name {Props.CampaignName}</p>
					<p>Keyword {Props.Keywords}</p>
					<p>Big amount {Props.BigAmount}</p>
					<p>Campaing found {Props.BigAmount - Props.CampaignFound}</p>
					<p>ON/OFF {Props.OnOff}</p>
					<p>Town {Props.Town}</p>
					<p>Radius {Props.Radius}km</p>
				</div>
			</div>
		</div>

style 

 .show-text {
	display: none;
} 

cały kod

https://codesandbox.io/s/product-237234

Comments

Mam pytanie czy jestem wstanie tak usunąć produkt 

	const Ref = useRef(null);

//--------------------------

const del =  (e)=>{
	e.Ref.current.remove();
}
//---------------------
	<div className="oneProduct" ref={Ref}>
    <Example />

	<button className="product--delete" onClick={del(this)}>
	&#x2718;
	</button>
</div>

Oraz jak zrobić bym mógł edytować wartości z productu ponieważ clearuje objecta

a robiąc temporary objecta nie bedzię widziała to którego się odwołać a chciałbym by wartość Z <Product props={example}> zostały wpisane do inputów

---

Uh, nie jestem znawcą Reacta, ale jestem mocno przekonany że jak już go używasz to nie powinieneś w ogóle ręcznie mutować DOMa tak jak robisz (`.remove()`), tylko zedytować listę produktów na poziomie JSa i dać Reactowi aktualizować DOM za Ciebie.

---

@adrian17 to ma inne pytanie lepiej delete button zrobić w compoencie Product czy tam gdzie jest on renderowany

---

oraz inny problem dlaczego funkcjie onClick wykonują się gdy nie ża aktywoawane buttonem

---

@adrian17, czyli raczej coś takiego 

dynamicProduct.filter((e) => {

            return e.key !== event;

        });