Languages

React - handleClick switch error

0 points
Asked by:
Dirask Community
6900

Do you know why my handleClick function throws an uncaught error?

my code:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

function App() {
  const [state, setState] = React.useState(0);

  function handleClick(type) {
    switch (type) {
      case 'increment':
        setState((state) => state + 1);
      case 'decrement':
        setState((state) => state - 1);
      default:
        throw new Error(type);
    }
  }

  return (
    <>
      Count: {state}
      <button onClick={() => handleClick('increment')}>+</button>
      <button onClick={() => handleClick('decrement')}>-</button>
    </>
  );
}

const root = document.querySelector('#root');
ReactDOM.render(<App/>, root );

stacktrace:

App.js:19 Uncaught Error: increment
    at handleClick (App.js:19)
    at onClick (App.js:26)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
    at executeDispatch (react-dom.development.js:8243)
    at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
    at processDispatchQueue (react-dom.development.js:8288)
    at dispatchEventsForPlugins (react-dom.development.js:8299)
    at react-dom.development.js:8508
    at batchedEventUpdates$1 (react-dom.development.js:22396)
    at batchedEventUpdates (react-dom.development.js:3745)
    at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
    at attemptToDispatchEvent (react-dom.development.js:6005)
    at dispatchEvent (react-dom.development.js:5924)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)
1 answer
0 points
Answered by:
Dirask Community
6900

I found the solution to the problem.

I didn't include break in any of the cases, so all the cases below were executed, including throwing an error.

Here's the solution:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

function App() {
  const [state, setState] = React.useState(0);

  function handleClick(type) {
    switch (type) {
      case 'increment':
        setState((state) => state + 1);
        break;
      case 'decrement':
        setState((state) => state - 1);
        break;
      default:
        throw new Error(type);
    }
  }

  return (
    <>
      Count: {state}
      <button onClick={() => handleClick('increment')}>+</button>
      <button onClick={() => handleClick('decrement')}>-</button>
    </>
  );
}

const root = document.querySelector('#root');
ReactDOM.render(<App/>, root );
0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join