I wrote a program that by pressing the ArrowUp button I want to first check the mode inside
Print the switch according to the mode on the console
And I have a button to change the mode
I do not know why the conditional statement inside the switch does not work
I also want the switch to be inside useEffect
please guide me
import { useEffect, useState } from "react";
export default function App() {
const [mode, setMode] = useState("one");
useEffect(() => {
const keyDownCallback = function (e) {
switch (e.keyCode) {
case 38:
mode === "one" ? console.log("one") : console.log("two");
break;
}
};
document.addEventListener("keydown", keyDownCallback);
return () => document.removeEventListener("keydown", keyDownCallback);
}, []);
function handleChangeMode() {
return mode === "one" ? setMode("two") : setMode("one");
}
return (
<div style={{ textAlign: "center" }}>
<h2>View the output on the console</h2>
<button onClick={handleChangeMode}>change mode</button>
</div>
);
}
Edited: Working example with minimal changes for you new code.
The only thing I changed was to add [mode]to useEffect
You declare a the function keyDownCallback in useEffect that is never used.
That is why you don't get your prints.
The switch case works fine, the problem is the way you are using useEffect.
You need to add a dependency for mode in order to be able to switch modes and print accordingly. Also providing a default case is crucial.
https://codesandbox.io/s/beautiful-https-6ol4zw?file=/src/App.js
And in case you want the mode to toggle with every click, you can simply move the toggling logic inside the listener's callback function.
https://codesandbox.io/s/winter-haze-29inyy?file=/src/App.js