How to create increase/decrease button with default 0 middle?

Question

Hi Team

I need some help, want to create an increase and decrease button that will both be clicked in react app. when the button is default 0 must be blur non clicked, when increase total value must also increase.

Farhan Ahmed · Answer

Install bootstrap use below command npm install bootstrap

Guest User · Answer

Hi Do i get rid of this error on my App.js "Module not found: Error: You attempted to import ../node_modules/bootstrap/dist/css/bootstrap.min.css which falls outside of the project src/ dire" Also last question have five files Footer.js and import them all on my App.js see below because i want to implement a unique function on App.js that decrease and increase values. // App.js import Header from './components/Header'; import Navbar from './components/Navbar'; import Content from './components/Content'; import Sidebar from './components/Sidebar'; import Footer from './components/Footer'; import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; function App() { return ( ); // function to show decrease and increase functionality function Increase_Decrease() { } } export default App;

Farhan Ahmed · Answer

Hi Check below code. import React, { useState } from "react" ; import "./App.css" ; import "../node_modules/bootstrap/dist/css/bootstrap.min.css" ; function App() { const [counter, setCounter] = useState(0); const incrementCount = () => { // Update state with incremented value setCounter(counter + 1); }; const decrementCount = () => { // Update state with incremented value setCounter((c) => Math.max(c - 1, 0)); }; return ( className= "btn-group" role= "group" aria-label= "Basic mixed styles example" > type= "button" className= "btn btn-danger" onClick={decrementCount} > - "number" min= "1" value={counter} className= "form-control" /> type= "button" className= "btn btn-success" onClick={incrementCount} > + ); } export default App;

How to create increase/decrease button with default 0 middle?

Answers (3)