Invalid hook call in React in useEffect

Question

I created app on react and use useEffect for EventListener and catch this error. I try all adviceses from react site and no one helped me. Pls, explain what I did wrong

I checked version of my react and all good with them, im also install react-hoock eslinter and got no error from it. I got error when i start game function

import React, { useEffect } from "react";
import BtnPlace from "./btn";
import CreateCards from "./CardProps";

import TogglePlace from "./Toggle";

const Action = () => {
  useEffect(() => {
    let cardContainer = document.getElementById("cardsContainer");
    if (cardContainer) {
      cardContainer.addEventListener("click", Clicker);
    }

    return function () {
      if (cardContainer) {
        cardContainer.removeEventListener("click", Clicker);
      }
    };
  }, []);

  const cards = [
    {
      word: "cry",
      translation: "плакать",
      image: "/img/cry.jpg",
      audioSrc: "audio/cry.mp3",
      id: "1",
    },
    {
      word: "dance",
      translation: "танцевать",
      image: "/img/dance.jpg",
      audioSrc: "audio/dance.mp3",
      id: "2",
    },
    {
      word: "dive",
      translation: "нырять",
      image: "/img/dive.jpg",
      audioSrc: "audio/dive.mp3",
      id: "3",
    },
    {
      word: "draw",
      translation: "рисовать",
      image: "/img/draw.jpg",
      audioSrc: "audio/draw.mp3",
      id: "4",
    },
    {
      word: "fish",
      translation: "ловить ",
      image: "/img/fish.jpg",
      audioSrc: "audio/fish.mp3",
      id: "5",
    },
    {
      word: "fly",
      translation: "летать",
      image: "/img/fly.jpg",
      audioSrc: "audio/fly.mp3",
      id: "6",
    },
    {
      word: "hug",
      translation: "обнимать",
      image: "/img/hug.jpg",
      audioSrc: "audio/hug.mp3",
      id: "7",
    },
    {
      word: "jump",
      translation: "прыгать",
      image: "/img/jump.jpg",
      audioSrc: "audio/jump.mp3",
      id: "8",
    },
  ];

  const cardComponent = cards.map((card) => (
    <CreateCards
      image={card.image}
      word={card.word}
      audio={card.audioSrc}
      translation={card.translation}
      key={card.id}
    />
  ));

  const flag: boolean = true;
  let i = 0;
  let audioArr: any[] = [];

  function Game() {
    for (i = 0; i < cards.length; i++) {
      audioArr.push(cards[i].audioSrc);
    }

    audioArr.sort(() => Math.random() - 0.5);

    let audio = new Audio("/" + audioArr[0]);
    audio.play();

    if (
      document.querySelectorAll(".card__rotate") &&
      document.querySelectorAll(".card__title") &&
      document.querySelectorAll(".card__iconTwo")
    ) {
      let d1 = document.querySelectorAll(".card__rotate");
      let d2 = document.querySelectorAll(".card__title");
      let d3 = document.querySelectorAll(".card__iconTwo");
      console.log(d1);
      for (let j = 0; j < d1.length; j++) {
        //@ts-ignore
        d1[j].style.display = "none";
        //@ts-ignore
        d2[j].style.display = "none";
        //@ts-ignore
        d3[j].style.margin = "28px 97px auto";
      }
    }
  }

  function Clicker(event: any) {
    let audioDat = event.target.dataset.audio;
    console.log(audioDat);
  }

  function Sound() {
    if (flag == true) {
      let audio = new Audio("/" + audioArr[i]);
      audio.play();
      i++;
    } else {
      let audio = new Audio("/" + audioArr[i]);
      audio.play();
    }
  }

  return (
    <div className="card-container" id="cardsContainer">
      <TogglePlace />
      {cardComponent}
      <div onClick={Game}>
        <div className="btn-wrapper">
          <BtnPlace />
        </div>
      </div>
    </div>
  );
};

export default Action;

this is error that i got when i start game function

Answer 1

you need to return function in useEffect "return function"

try this :

    useEffect(() => {
       cont cardContainer =()=>{
        let cardContainer = document.getElementById('cardsContainer')
        if (cardContainer) {
            cardContainer.addEventListener('click', Clicker)
        }
        if (cardContainer) {
            cardContainer.removeEventListener('click', Clicker)
        }
       }


        return function () {
            cardContainer() 
        }
    }, [])