intersection observer is not working in react?

Question

I am creating an application which in the scroll I have use intersection observer so in that program one error is comming can not property of null reading foreach and do some scroll in that application and observer the viewport ,so how to make it correct in that program ,code is given below

export default function App() {
  const card = document.querySelector(".card");
  const ob = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        entry.target.classList.toggle("show", entry.isIntersecting);
        if (entry.isIntersecting) ob.unobserve(entry.target);
      });
    },
    {
      threshold: 1
    }
  );
  card.forEach((card) => {
    ob.observe(card);
  });

  return (
    <div className="App">
      <div className="card-container">
        <div className="card show">This is a First card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a Last card</div>
      </div>
    </div>
  );
}

Answer 1

Try to wrap the intersectionObserver initialization inside useEffect.

For Example -

export default function App() {

  React.useEffect(() => {
    const card = document.querySelector(".card");
    const ob = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          entry.target.classList.toggle("show", entry.isIntersecting);
          if (entry.isIntersecting) ob.unobserve(entry.target);
        });
      },
      { 
        threshold: 1
      }
    );
    card.forEach((card) => {
      ob.observe(card);
    });
   }, []);
  

  return (
    <div className="App">
      <div className="card-container">
        <div className="card show">This is a First card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a card</div>
        <div className="card">This is a Last card</div>
      </div>
    </div>
  );
}