Why does my eventListener works only once?

Question

Ive been trying to make this page where you can change object when clicking a key, but the eventlistener i am using works only once i select the screen that it is set on.

const onKeydown4 = (e) => {
            if (e.key == "w")
                setStore({
                    bigVariant:
                        store.bigVariant === "variant_big_A"
                            ? "variant_big_B"
                            : "variant_big_A",
                })
        }

useEffect(() => {
            if (props.name === "Screen 4") {
                window.addEventListener("keydown", onKeydown4)
            }
        }, [])

        return <Component {...props} />
    }
}

score 0 · Answer 1 · answered Sep 02 '22 at 10:24

0

you need to add window.removeEventListener("keydown", onKeydown4).

const App = () => {
  const onKeydown4 = (e) => {
    if (e.key == "w")
      setStore({
        bigVariant:
          store.bigVariant === "variant_big_A"
            ? "variant_big_B"
            : "variant_big_A",
      });
  };

  useEffect(() => {
    if (props.name === "Screen 4") {
      window.addEventListener("keydown", onKeydown4);
    }
    return () => {
      window.removeEventListener("keydown", onKeydown4);
    };
  }, []);

  return <Component {...props} />;
};

export default App;

answered Sep 02 '22 at 10:24

Kanti vekariya

667
3
13

Didnt do the charm – Cublaiiii Sep 02 '22 at 10:54
here can u pls share the codesandbox example. – Kanti vekariya Sep 02 '22 at 11:02
I am not able to do that because its done in Framer... but here is the whole code on github... btw. thanks for your time https://github.com/cublaii/messing-around.git – Cublaiiii Sep 02 '22 at 11:13

Why does my eventListener works only once?

1 Answers1