I need to subtract the count and update the remaining count

Question

I am using TextField that field data I am adding into the table that works fine what my task is I have one field called Total no of count their I am storing my data count so whenever I add data into the table it will be based on the count, mean like example if I have count 3 then I am able to use count max 3 or if I want to divide that count with a different name that also works only max count I used whatever present in Total no of count or after dividing count with a user name I need to update remaining count in that field or whatever count is present after added into a table showing remaining count when I use all count in one time or add it to the table that works fine mean Total no of count get subtracted with table data count and remain 0 but when I divide that count into 2 or 3 names field mean by 1 by 1 then it will not work properly mean count not get subtracted properly

In this method, I am subtracting and setting the remaining count

  const totalRemainingCount =
    totalUsers -
    Number(
      AssignSearchesForm.values.countAssigned ||
        teamdata?.map((data) => data.countAssigned)
    );

export default function App() {
  const [teamdata, setTeamData] = React.useState([]);

  const AssignSearchesForm = useFormik({
    initialValues: {
      selectName: "",
      selectAge: "",
      location: "",
      countAssigned: ""
    },
    validationSchema,
    onSubmit: (values, formikHelper) => {
      setTeamData([values, ...teamdata]);
      formikHelper.resetForm();
    }
  });

  let filteredArray = nameList.filter(
    (e) => !teamdata.some((data) => data.selectName === e.selectName)
  );

  const handleChange = (e) => {
    const selectedName = e.target.value;
    const name = nameList.find((data) => data.selectName === selectedName);
    const newOptions = Object.values(name).reduce((optionList, key) => {
      optionList.push({ value: key, label: key });
      return optionList;
    }, []);
    AssignSearchesForm.setFieldValue("selectName", selectedName);
    AssignSearchesForm.setFieldValue("selectAge", newOptions[1]?.value || "");
    AssignSearchesForm.setFieldValue("location", newOptions[2]?.value || "");
  };

  const totalUsers = 3;
  const totalRemainingCount =
    totalUsers -
    Number(
      AssignSearchesForm.values.countAssigned ||
        teamdata?.map((data) => data.countAssigned)
    );

  return (
    <div className="App">
      <Card color="primary" variant="outlined">
        <CardHeader
          title={
            <Typography variant="subtitle1">
              Total no of count ={" "}
              {totalRemainingCount <= 0 ? 0 : totalRemainingCount}
            </Typography>
          }
        />
        <Divider />
        <CardContent>
          <Grid container direction="row" spacing={1}>
            <Grid item xs={4}>
              <TextField
                sx={{ minWidth: 185 }}
                select
                id="outlined-basic"
                label="Select Name"
                name="selectName"
                size="small"
                onChange={handleChange}
                value={AssignSearchesForm.values.selectName}
                error={
                  AssignSearchesForm.errors.selectName &&
                  AssignSearchesForm.touched.selectName
                }
                helperText={
                  AssignSearchesForm.touched.selectName &&
                  AssignSearchesForm.errors.selectName
                }
              >
                {filteredArray?.map((option) => (
                  <MenuItem key={option.selectName} value={option.selectName}>
                    {option.selectName}
                  </MenuItem>
                ))}
              </TextField>
            </Grid>
            <Grid item xs={4}>
              <TextField
                id="outlined-basic"
                label="location"
                name="location"
                size="small"
                {...AssignSearchesForm.getFieldProps("location")}
                error={
                  AssignSearchesForm.touched.location &&
                  AssignSearchesForm.errors.location
                }
                helperText={
                  AssignSearchesForm.touched.location &&
                  AssignSearchesForm.errors.location
                }
              />
            </Grid>
            <Grid item xs={4}>
              <TextField
                id="outlined-basic"
                label="Select Age"
                name="selectAge"
                size="small"
                {...AssignSearchesForm.getFieldProps("selectAge")}
                error={
                  AssignSearchesForm.errors.selectAge &&
                  AssignSearchesForm.touched.selectAge
                }
                helperText={
                  AssignSearchesForm.touched.selectAge &&
                  AssignSearchesForm.errors.selectAge
                }
              />
            </Grid>
            <Grid item xs={4}>
              <TextField
                id="outlined-basic"
                label="Count Assign"
                name="countAssigned"
                size="small"
                type="number"
                {...AssignSearchesForm.getFieldProps("countAssigned")}
                error={
                  AssignSearchesForm.errors.countAssigned &&
                  AssignSearchesForm.touched.countAssigned
                }
                helperText={
                  AssignSearchesForm.touched.countAssigned &&
                  AssignSearchesForm.errors.countAssigned
                }
              />
            </Grid>
            <Grid item xs={4}>
              <Button
                onClick={() => {
                  AssignSearchesForm.handleSubmit();
                }}
                variant="contained"
              >
                Add
              </Button>
            </Grid>
          </Grid>
        </CardContent>
      </Card>
      <Table teamdata={teamdata} />
    </div>
  );
}

CodeSandBox Link

Answer 1

You need to update your logic for the way you are calculating the count:

const totalRemainingCount =
    totalUsers -
    (parseInt(
      AssignSearchesForm.values.countAssigned
        ? AssignSearchesForm.values.countAssigned
        : 0,
      10
    ) + teamdata?.reduce((partialSum, a) => partialSum + a.countAssigned, 0));

You were getting NaN because the data you were trying to use for subtraction was not the number. Here, I am doing the sum of countAssigned in the table and adding it with the form data that will allow you to get the right value.

Here is an example:https://codesandbox.io/s/preset-ranges-antd-4-19-2-forked-kczd1y?file=/App.js:1838-2095

Answer 2

What I have understood so far is that the Total count is not setting properly. If this is the case then you need to set state of count when you click add button, so that it stores the countAssigned value. Also using the max property in TextField to limit the count to remaining value.

I have edited your codesandbox example.