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">∨</button>
<button className="product--edit">✎</button>
<button className="product--delete">✘</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">∨</button>
<button className="product--edit">✎</button>
<button className="product--delete">✘</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;