Reduce onIncrement() and onDecrement() to 1 function Reactjs? - reactjs

Question

I am coding a counters app. So I want to replace onIncrement, onDecrement function by onChange function.
I want to remove onIncrement and onDecrement function. Then I want to add new onChange function
The onChange function should take a single parameter and it can decrement or increment a counter.
my code:
const Counter = props => {
const { onIncrement, onDecrement, count, index } = props;
return (
<div className="counter">
<b>{count}</b>
<div className="counter-controls">
<button
onClick={() => onDecrement(index)}
className="button is-danger is-small"
>
-
</button>
<button
onClick={() => onIncrement(index)}
className="button is-success is-small"
>
+
</button>
</div>
</div>
);
};
const Total = props => {
const { sum } = props;
return (
<div>
<p>Total: {sum} </p>
</div>
);
};
export default function App() {
const [data, setData] = useState([
{ id: 1, value: 0 },
{ id: 2, value: 0 },
{ id: 3, value: 0 }
]);
const total = data.map(item => item.value).reduce((p, n) => p + n);
const [sum, setSum] = useState(total);
const handleIncrement = index => {
const clone = [...data];
clone[index - 1].value += 1;
setData(clone);
setSum(sum + 1);
};
const handleDecrement = index => {
const clone = [...data];
clone[index - 1].value -= 1;
setData(clone);
setSum(sum - 1);
};
return (
<div className="App">
{data.map(counter => (
<Counter
key={counter.id}
onIncrement={handleIncrement}
onDecrement={handleDecrement}
index={counter.id}
count={counter.value}
/>
))}
<Total sum={sum} />
</div>
);
}

Answer 1

You can write a single onChange function and pass on the change value while calling the function. Use the changeValue to add to the previous data. For a decrement implementation change value will be -1 and for increment it will be +1
const Counter = props => {
const { onChange, count, index } = props;
return (
<div className="counter">
<b>{count}</b>
<div className="counter-controls">
<button
onClick={() => onChange(index, -1)}
className="button is-danger is-small"
>
-
</button>
<button
onClick={() => onChange(index, 1)}
className="button is-success is-small"
>
+
</button>
</div>
</div>
);
};
const Total = props => {
const { sum } = props;
return (
<div>
<p>Total: {sum} </p>
</div>
);
};
export default function App() {
const [data, setData] = useState([
{ id: 1, value: 0 },
{ id: 2, value: 0 },
{ id: 3, value: 0 }
]);
const total = data.map(item => item.value).reduce((p, n) => p + n);
const [sum, setSum] = useState(total);
const handleChange = (index, changeValue) => {
const clone = [...data];
clone[index - 1].value += changeValue;
setData(clone);
setSum(prevSum = prevSum + changeValue);
};
return (
<div className="App">
{data.map(counter => (
<Counter
key={counter.id}
onChange={handleChange}
index={counter.id}
count={counter.value}
/>
))}
<Total sum={sum} />
</div>
);
}