Code should increment or decrement his own input, for diameter should work only button for diameter etc. But every click increment all inputs
The problem is every click increment all inputs that i want to change
const initialValues = {
diameter : 12,
friction : 1,
robotsQnt: 1,
simulationTime : 1,
}
const [count,setCount] = useState(1);
const incrementCount = () =>{
setCount(count + 1);
};
const decrementCount = () =>{
if(count>0){setCount(count -1);}
};
<div className='inputForm'>
<input type="number" id='InputDiameter' pattern="^-?[0-9]d*.?d*$" value = {count} onChange={(event) =>{ setCount(event.target.value) }}/>
<label for="InputDiameter" className='static-value'>w</label>
</div>
<div className='ButtonCount' onClick={incrementCount(diameter)}><button type='button'><span className="countText">+</span></button></div>
<div className='ButtonCount' onClick={decrementCount(diameter)}><button type='button'><span className="countText">-</span></button></div>
</div>
<div className='inputForm'>
<input type="number" id='InputNumber' pattern="^-?[0-9]d*.?d*$" value = {count} onChange={(event) =>{ setCount(event.target.value) }}/>
<label for="inputNumber" className='static-value'>qnt</label>
</div>
<div className='ButtonCount' onClick={incrementCount}><button type='button'><span className="countText">+</span></button></div>
<div className='ButtonCount' onClick={decrementCount}><button type='button'><span className="countText">-</span></button></div>
</div>