3
Answers

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

Guest User

Guest User
2y
741
1

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.

Answers (3)
1
Farhan Ahmed

Farhan Ahmed

65 28.3k 15.4m 2y

Install bootstrap use below command

npm install bootstrap

1
Guest User

Guest User

Tech Writer 2.1k 516.1k 2y

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 (
<div>
<Header />
<Navbar />
<div className="row">
<Content />
<Sidebar/>
</div>
<Footer />
</div>
);
// function to show decrease and increase functionality
function Increase_Decrease() {
}
}
export default App;

1
Farhan Ahmed

Farhan Ahmed

65 28.3k 15.4m 2y
Hi Check below code.
 
  1. import React, { useState } from "react";  
  2. import "./App.css";  
  3. import "../node_modules/bootstrap/dist/css/bootstrap.min.css";  
  4.   
  5. function App() {  
  6.   const [counter, setCounter] = useState(0);  
  7.   const incrementCount = () => {  
  8.     // Update state with incremented value  
  9.     setCounter(counter + 1);  
  10.   };  
  11.   const decrementCount = () => {  
  12.     // Update state with incremented value  
  13.     setCounter((c) => Math.max(c - 1, 0));  
  14.   };  
  15.   return (  
  16.     <>  
  17.       <div  
  18.         className="btn-group"  
  19.         role="group"  
  20.         aria-label="Basic mixed styles example"  
  21.       >  
  22.         <button  
  23.           type="button"  
  24.           className="btn btn-danger"  
  25.           onClick={decrementCount}  
  26.         >  
  27.           -  
  28.         </button>  
  29.         <input type="number" min="1" value={counter} className="form-control" />  
  30.         <button  
  31.           type="button"  
  32.           className="btn btn-success"  
  33.           onClick={incrementCount}  
  34.         >  
  35.           +  
  36.         </button>  
  37.       </div>  
  38.     </>  
  39.   );  
  40. }  
  41.   
  42. export default App;  
 
Next Recommended Forum