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

Guest User

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.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Farhan Ahmed4y ago
Install bootstrap use below command

npm install bootstrap
Guest User4y ago
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 Ahmed4y ago

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;