Dostaje bład ogólnie chce by btn przechodził po porductach i wyświetłał paragrafy co maja display:none

Question

Dostaje bład

Navbar.js:4 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

ogólnie chce by btn przechodził po porductach i

const btn = document.querySelector(".product--show");
const product = document.querySelectorAll(".product");
btn.addEventListener("click", function () {
	// console.log(question);

	product.forEach(function (item) {
		if (item !== product) {
			item.classList.remove("show-text");
		}
	});

	product.classList.toggle("show-text");
});

 

wyświetłał paragrafy co maja display:none

	<div className="product--container">
						<div className="product">
							{/* ref={productRef} */}
							<div className="product--style">
								<h4>Porduct 1</h4>
								<button className="product--show">&#8744;</button>
								<button className="product--edit">&#x270E;</button>
								<button className="product--delete">&#x2718;</button>
								<div className="show-text">
									<p>Capmaing Name</p>
									<p>keyword</p>
									<p>Big amount</p>
									<p>Campaing found</p>
									<p>ON/OFF</p>
									<p>Town</p>
									<p>Radius</p>
								</div>
							</div>
						</div>
					</div>

cały kod 

import React, { useRef, useState } from "react";
const btn = document.querySelector(".product--show");
const product = document.querySelectorAll(".product");
btn.addEventListener("click", function () {
	// console.log(question);

	product.forEach(function (item) {
		if (item !== product) {
			item.classList.remove("show-text");
		}
	});

	product.classList.toggle("show-text");
});
function Navbar() {
	// const ref = useRef(null);
	// const productRef = useRef(null);
	const [option, setOption] = useState(false);
	const contractors = () => {
		setOption(!option);
	};
	const Submit = () => {
		setOption(option);
	};

	return (
		<nav className="navbar">
			<button className="nav-button-contractors" onClick={contractors}>
				Add new Product
			</button>

			{option === true ? (
				<div className="modal">
					<form className="main--form" onSubmit={Submit}>
						<input className="form--input" placeholder="Campaign Name"></input>
						<input className="form--input" placeholder="Keywords"></input>
						<input className="form--input" placeholder="Big amount"></input>
						<input className="form--input" placeholder="Campaing found"></input>

						<label>Status On</label>
						<input type="checkbox"></input>

						<select className="form--input">
							<option>Cracow</option>
							<option>Warsaw</option>
							<option>Kielce</option>
							<option>Opole</option>
							<option>Rzeszów</option>
							<option>Gdańsk</option>
							<option>Poznań</option>
						</select>
						<input className="form--input" placeholder="Radius"></input>
						<input className="form--input" type="submit" value="Send"></input>
					</form>
				</div>
			) : (
				<div>
					<h1>Products</h1>
					<div className="product--container">
						<div className="product">
							{/* ref={productRef} */}
							<div className="product--style">
								<h4>Porduct 1</h4>
								<button className="product--show">&#8744;</button>
								<button className="product--edit">&#x270E;</button>
								<button className="product--delete">&#x2718;</button>
								<div className="show-text">
									<p>Capmaing Name</p>
									<p>keyword</p>
									<p>Big amount</p>
									<p>Campaing found</p>
									<p>ON/OFF</p>
									<p>Town</p>
									<p>Radius</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			)}
		</nav>
	);
}

export default Navbar;

 

Answer 1

Próbujesz pobrać element o klasie product--show zanim React zdąży go wyrenderować i w ogóle zmapować atrybut className na class, który CSS-owy selector z kropką potrafi rozpoznać. Dopóki nie masz dobrego powodu, to unikaj mieszania czystego DOM-u z React-em/JSX. Do podpinania zdarzeń służą propsy on*, np. onClick (wielkość liter ma znaczenie). A jeśli na pewno potrzebujesz ręcznie podpiąć event, to lepiej użyć do tego ref.

Comments

próbowałem ref ale dostaje queryselector  undefined lub null

// const ref = useRef(null);

 

btn = ref.curren.queryslector("example");

przy buttonie ref="ref " 

 

---

czyli zrobić to tak onClikck={show}

 const show = ()=>{

        //  products.forEach(function (item) {

        //      if (item !== products) {

        //          item.classList.remove("show-text");

        //      }

        //  });

        //  products.classList.toggle("show-text");

 tylko nie wiem jak zrobić by wiedział że productowi ma dodać show-text

---

ok mam Odpowiedz 

const productRef = useRef(null);	
const show = () => {
		productRef.current.classList.toggle("show-text");
	
};  
<div className="show-text" ref={productRef}>

 

               

 

---

próbowałem ref ale dostaje queryselector  undefined lub null

A w którym miejscu odczytywałeś ref? Bo trzeba najpierw poczekać aż React wyrenderuje komponent i podepnie ref pod element - ustaw useEffect na inicjalny render i tam sobie pobierz element.

const elementRef = useRef();

useEffect(() => {
  elementRef.current; // zrób coś z `ref`
}, []);

return (
  <div ref={elementRef}>Tekst</div>
)

czyli zrobić to tak onClikck={show}

Znowu mieszasz czysty DOM z JSX - unikaj tego, dopóki naprawdę nie masz dobrego powodu. Klasy możesz przestawiać wartością przechowywaną w stanie, którą podpinasz do className. A do wygodniejszej manipulacji klasami przydaje się biblioteka classnames.

 tylko nie wiem jak zrobić by wiedział że productowi ma dodać show-text

Możesz mieć tablicę, z której będziesz renderować elementy na podstawie jakiejś wartości (np. obiektu, który będzie przechowywać treść elementu i dane pod atrybuty), gdzie trzymasz również warunek ustawienia klasy i wtedy na klik w event handlerze robisz pętlę, w której przestawiasz ten warunek. Możesz też mieć osobne stany dla każdej klasy (ale tutaj dość szybko zrobi się bałagan; przejście na reducera może pomóc).