Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

150
Views
How to use conditional commands inside the switch in React

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>
  );
}
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!