EN
React - handleClick switch error
1
answers
0
points
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
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