score:0
you should format your component. otherwise it's hard to read and you'll get issues because of that.
i couldn't understand if it works fine on a manual test, so not sure if the issue is on the testing or the component itself.
when using the setter in usestate you have a callback, so instead of using the getter, you should do:
const handleadd = () => {
setcounter(prev => prev + 1);
}
for the testing you should use an id to better identify the button, not the type.
score:0
you made a mistake to update state variable using the previous state value.
all the react components can have a state associated with them. the state of a component can change either due to a response to an action performed by the user or an event triggered by the system. whenever the state changes, react re-renders the component to the browser. before updating the value of the state, we need to build an initial state setup. once we are done with it, we use the setstate() method to change the state object. it ensures that the component has been updated and calls for re-rendering of the component.
setstate({ statename : updatedstatevalue })
// or
setstate((prevstate) => ({
statename: prevstate.statename + 1
}))
so you should use like the following.
const handleadd= ()=>{
setcounter(prev => prev+1);
}
const handlesubstract = ()=>{
if(counter>0){
setcounter(prev => prev-1);
}
}
Source: stackoverflow.com
Related Query
- Why the button event doesnt increment the counter?
- Why value from a Material-UI Button is not being passed to the onClick event handler?
- Why is the `MouseEvent` in the checkbox event handler not generic?
- WKScriptMessageHandler won't Listen to 'onclick' or 'click' event on a button element on a webpage. The web page is developed using Reactjs
- Why the ref button will be clicked 3 times?
- Using React Hooks, why are my event handlers firing with the incorrect state?
- Why doesn't the 'change' event in jQuery fire onChange in ReactJS?
- Why the binding event is executed after the setstate is re-rendered
- Why is the keyboard (onKeyDown) event bubbling not accessible on the component, but is on the parent?
- Why isn't my event listener callback using the correct state?
- Why does the Sign In With Google button disappear after I render it the second time?
- React: Why the count values are different in useEffect and inc event handler?
- Why popstate doesnt fire my function when back button is clicked? (mobile ios chrome)
- Why the input doesnt work when generated by React
- useState counter flickers after clicking the button
- How to test for a `click` event on the icon button of the `material-ui` AppBar?
- Why Caption on the button doesn't change?
- when i increment the counter it increases by 2 not one. i am using react context for this
- In react class component why is the state not being changed in the first instance of button click? But in the second instance it gets updated?
- basic question related to increment and decrement the counter in react
- ReactJS Button not calling the onClick event
- Why does the onChange event handler on <form> pick upp dispatched events from <select>, but not <input>?
- How do you get a button in DIV not call the <div> click event
- is there any way to get the "Allow" button click event in "Allow to use microphone popup"(chrome latest)?
- How to get the TextField value with onclick button event React Material UI
- how to show a Form in the same window on onClick event of a button in react.js
- Why my "new Question" button is not changing the question when i click the button?
- Why react useQuery() doesnt fetch the newest data after a mutation?
- How to select the rows of a material table programmatically on onclick event of button -React js
- why the Button changing position onClick?
More Query from same tag
- How to use Font Awesome 6 icons in React.js, especially social icons?
- Divider Disappears When Adding Floated Tag on Vertical Menu Semantic UI React
- Reactjs delete an item from Dexie.js
- React Form: How to add error message that disappear if the input was typed in
- How to fix / clear react-select while using formik?
- Laravel-echo showing 401 (Unauthorized) for private channel except one user
- Pass this.props.params to a child component
- My array's length is always zero even it contains elements
- Displaying actual land area on map
- Cannot render my array in React: getting an error "Expected an assignment or function call and instead saw an expression"
- How to mock external module method?
- React blog with firebase
- I get the error : - Unhandled Rejection (TypeError): Cannot read property 'id' of undefined in React Application
- When testing react project npm test works but jest doesn't
- Ant Design - How to restrict clickable area of table headers when sorting
- FullCalendar React header custom buttons not showing
- Material UI <TextField/> not Vertical Align with it's Label
- Load data from Redux store to React state with Thunk
- SQL promise in NodeJS returning empty brackets, but when same query is executed in SQL workbench, it returns the correct data
- create-react-app: invalid json response body at https://registry.npmjs.org/loose-envify
- importing image dynamically (React Js) (Require img path cannot find module)
- Compare each item with its next item and find each item big or small by comparing. And push the result to a new array for each
- How to access env values for react in mern app deployed on heroku?
- React don't change state after first method trigger
- moment js 2 dates difference showing as NaN
- React Can't Access Array Inside Object
- React and TypeScript - How to render without wrapping in a parent div?
- Writing test for form(including useState)
- NextJS not showing content from static json file
- how to fix (CSRF token missing or incorrect ) react/redux + django