score:4
Accepted answer
whenever count
is decreased get the maximum value (using math.max()
) of count - 1
after and 0:
const { usestate } = react;
const home = () => {
const [count, setcount] = usestate(0);
const onclick = () => {
setcount(c => c + 1);
};
const onclickdec = () => {
setcount(c => math.max(c - 1, 0));
};
return (
<div>
<h1>please click me for increase {count}</h1>
<button classname="btn btn-primary btn-sm" onclick={onclick}>
+
</button>
<button classname="btn btn-primary btn-sm" onclick={onclickdec}>
-
</button>
</div>
);
};
reactdom.render(
<home />,
root
)
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
you can use the same idea if you want to limit increase to a certain number using math.min()
:
const { usestate } = react;
const home = () => {
const [count, setcount] = usestate(0);
const onclick = () => {
setcount(c => math.min(c + 1, 3));
};
const onclickdec = () => {
setcount(c => math.max(c - 1, 0));
};
return (
<div>
<h1>please click me for increase {count}</h1>
<button classname="btn btn-primary btn-sm" onclick={onclick}>
+
</button>
<button classname="btn btn-primary btn-sm" onclick={onclickdec}>
-
</button>
</div>
);
};
reactdom.render(
<home />,
root
)
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
score:0
imo. the simplest solution would be to disable the button.
const { usestate } = react;
const home = () => {
const [count, setcount] = usestate(0);
const onclick = () => {
setcount(count + 1);
};
const onclickdec = () => {
setcount(count - 1);
};
return (
<div>
<h1>please click me for increase {count}</h1>
<button classname="btn btn-primary btn-sm" onclick={onclick}>
+
</button>
<button disabled={count < 1} classname="btn btn-primary btn-sm" onclick={onclickdec}>
-
</button>
</div>
);
};
reactdom.render(
<home />,
root
)
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
score:0
this might be helpful. avoids negative values by conditionally hiding the (-) button. also gives a reset button.
class classcount extends component {
constructor(props) {
super(props)
this.state = {
count:0
}
}
handleincrement=()=>{
this.setstate(prevstate =>{
return{count: prevstate.count + 1}
})
}
handledecrement=()=>{
this.setstate((prevstate)=>{
return{count: prevstate.count - 1}
})
}
handlereset=()=>{
this.setstate((prevstate)=>{
return{count: 0}
})
}
render() {
var mycount = this.state.count;
return (
<div>
<h3>count is {mycount}</h3>
<button classname='btn btn-success m-1' onclick={this.handleincrement}>+</button>
{
mycount >=1 ? <button classname='btn btn-danger m-1' onclick={this.handledecrement}>-</button> : ''
}
{
mycount >0 ? <button classname='btn btn-info m-2' onclick={this.handlereset}>reset</button> : ''
}
</div>
)
}
}
Source: stackoverflow.com
Related Query
- How to stop negative number with react hooks?
- React hooks pagination with useEffect - how to revert page number if request fails?
- How to implement Error Boundary with React Hooks Component
- How to focus something on next render with React Hooks
- How to mock history.push with the new React Router Hooks using Jest
- React Hooks with React Router v4 - how do I redirect to another route?
- How to handle/chain synchronous side effects that depend on another with React hooks
- How to implement componentDidMount with hooks in React to be in line with the EsLint rule "react-hooks/exhaustive-deps": "warn"?
- How to use React Hooks Context with multiple values for Providers
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- How to use React Hooks with video.js?
- How can I get webpack-dev-server to stop downloading incorrect chunks on content change with React lazy/Suspense code splitting?
- How to perform a server side data fetching with React Hooks
- How to use static variables with react hooks
- How to perform authentication with React hooks and react-router
- How to use RichUtils with React Hooks
- How to load child component with props on first render with React Hooks
- How to update state that has dependency on other state with React Hooks
- React Hooks - How to target an element child (with useRef) with a variable declaration outside of useEffect?
- How to handle React Svg Drag and Drop with React Hooks
- How to update with React Hooks specific value of an array inside an object?
- How to use react hooks on react-native with react-navigation
- how to put a file in state variable with react hooks
- How to use setTimeout() along with React Hooks useEffect and setState?
- In react with hooks and bootstrap, how do I change chevron as accordion opens?
- Need a clearer explanation how to avoid infinite re-rendering with React hooks
- How to test React useEffect hooks with jasmine and enzyme
- How to resize columns with React Table Hooks with a specific table width
- How to re-render component with react hooks
- How to push an object into an array with React Hooks
More Query from same tag
- React redux search filter not displaying filtered content?
- React JS - Fetch data display in React JS Form
- npm err missing script webpack-dev-server
- Recreate the radio button behavior in ReactJS
- Styled component with access to React component state?
- React Native - How to perform a really soft vibration?
- React-Router: Why does pushing to history change my url?
- How to delete an element from Redux store
- React Router always redirect me to a different url
- Adding data to array using UseState onChange
- React: find string in array and rename it
- How to add props to the component using typescript and react?
- Wrapping application routes for children with React-Router-4
- React onChange method not working in react_on_rails
- Reactjs onChange event returns element not an object
- Jest test fails : TypeError: window.matchMedia is not a function
- how to push an object to a state array based on user input
- Using dispatch in class based component give error of invalid hook call
- React TS get prop for shared component
- when should I pass 'className' props to react component?
- How to set new value in two dimensional array with useState()
- How to loop over form inputs and get values in react
- Replace Text with Content Editable in ReactJS
- How to connect Threejs to React?
- React Testing Library - testing hooks with React.context
- How to have sub components CSS class react on parent components CSS class?
- Positioning and scaling a background image responsively for a full-screen width div
- How fetch data from firebase realtime database in react js
- How do I add a new property to an empty object that is stored in a component's state?
- Redux / RTK: create enhancer for one slice?