How to Increment and Decrement in ReactJS using Formik - reactjs

Question

I have a very simple problem incrementing and decrementing the value in my TextField.
I'm using Formik and Material UI in React.
Pls see this codesandbox link
CLICK HERE
<TableCell>
{" "}
<TextField
variant="outlined"
fullWidth
type="number"
name={`data.${idx}.returnValue`}
value={
values.data[idx] &&
values.data[idx].returnValue
}
onChange={handleChange}
onBlur={handleBlur}
inputProps={{
min: 0,
style: {
textAlign: "center"
}
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<IconButton>
<RemoveCircleOutlineIcon />
</IconButton>
</InputAdornment>
),
endAdornment: (
<InputAdornment position="end">
<IconButton>
<AddCircleOutlineIcon />
</IconButton>
</InputAdornment>
)
}}
/>
</TableCell>

Answer 1

Use setValues to update your values object. Every time the user clicks the increment/decrement button you call setValues to update the current record.
This is what your RemoveCircleOutlineIcon onClick function would look like for returnValue's textfield.
...
onClick={() => {
// decrement current record's returnValue
const newData = values.data.map((currData) => {
if (currData.name !== record.name) return currData;
return { ...currData, returnValue: currData.returnValue - 1 };
});
setValues({ ...values, data: newData });
}}
...this one for AddCircleOutlineIcon, basically the same we're just incrementing the currrent record's returnValue.
onClick={() => {
// increment current record's returnValue
const newData = values.data.map((currData) => {
if (currData.name !== record.name) return currData;
return { ...currData, returnValue: currData.returnValue + 1 };
});
setValues({ ...values, data: newData });
}}
The onClicks for current record's dispatchValue textfield would be the same above except you'll update dispatchValue instead of returnValue. You get the idea.

Answer 2

You could use the replace function from arrayHelpers.
<IconButton
onPress={() => {
replace(idx, { ...record, returnValue: record.returnValue + 1})
}}
>
</IconButton>
You could check the working example here

Answer 3

You have to use States to render the changes, I modified your logic using useState. and added an event to change value each time you change press a button (+ or -).
const [products, setProduct] = useState(data);
const initialValues = {
customer_id: null,
reason: "",
products
};
// an example of the events
<InputAdornment position="start">
<IconButton
onClick={() => {
decrement(
idx,
"returnValue" // the key value
);
}}
>
<RemoveCircleOutlineIcon />
</IconButton>
</InputAdornment>
Check you code here to see it more clearly.