How to prevent sending axios patch response of existing and empty form data?

Question

{
    id: 1,
    firstName: "Brendan",
    lastName: "McLese",
    tel: "271-287-8197",
    email: "[email protected]",
}

For example, I took a data and I assigned this data to the form as a value. Then, when I update this data partially, how will I prevent the existing and empty data? Is there an easy way to do this? When I use the filter method, I experience a lot of performance loss.

Submit Func:

await axios.patch({
    editedData: {
      ...formData,
          someData: someData // if I use useState values
    },
    id: data._id,
})

console.log(editedData):

{
    id: 1,
    firstName: "", // changed value and empty string or null
    lastName: "McLese",
    tel: "271-777-7777", // changed value
    email: "[email protected]",
}

It goes as in the example above. But when I tried to send it as below, I couldn't how can I do it.

{
    firstName: "", // this is empty value I want to prevent null or emmpty string value
    tel: "271-777-7777", // changed value
}

Form:

<Form className="mt-2 pt-50" onSubmit={handleSubmit(onSubmit)}>
  <Row>
    <Col sm="6" className="mb-1">
      <Label className="form-label" for="firstName">
        First Name
      </Label>
      <Controller
        name="firstName"
        control={control}
        render={({ field }) => (
          <Input
            id="firstName"
            placeholder="John"
            invalid={errors.firstName && true}
            {...field}  //* *****
          />
        )}
      />
      {errors && errors.firstName && (
        <FormFeedback>Please enter a valid First Name</FormFeedback>
      )}
    </Col>
    <Col sm="6" className="mb-1">
      <Label className="form-label" for="lastName">
        Last Name
      </Label>
      <Controller
        name="lastName"
        control={control}
        render={({ field }) => (
          <Input
            id="lastName"
            placeholder="Doe"
            invalid={errors.lastName && true}
            {...field} //* *****
          />
        )}
      />
      {errors.lastName && (
        <FormFeedback>Please enter a valid Last Name</FormFeedback>
      )}
    </Col>
    <Col sm="6" className="mb-1">
      <Label className="form-label" for="login-email">
        Email
      </Label>
      <Controller
        id="email"
        name="email"
        control={control}
        render={({ field }) => (
          <Input
            type="email"
            placeholder="[email protected]"
            invalid={errors.email && true}
            {...field} //* *****
          />
        )}
      />
      {errors.email && (
        <FormFeedback>{errors.email.message}</FormFeedback>
      )}
    </Col>
    <Col className="mt-2" sm="12">
      <Button type="submit" className="me-1" color="primary">
        Save changes
      </Button>
      <Button
        color="secondary"
        outline
        onClick={() => {
          setValue("firstName", data?.first_name);
          setValue("lastName", data?.last_name);
          setValue("email", data?.email);
        }}
      >
        Discard
      </Button>
    </Col>
  </Row>
</Form>

Answer 1

you can filter out those fields from the editedData object before making the request.

const editedData = {
    firstName: "", // changed value and empty string or null
    lastName: "McLese",
    tel: "271-777-7777", // changed value
    email: "[email protected]",
};

const filteredData = Object.fromEntries(
    Object.entries(editedData).filter(([_, value]) => value !== null && value !== "")
);

// Now filteredData contains only non-empty and non-null values
console.log(filteredData);

// Make your axios patch request using the filtered data
await axios.patch({
    editedData: filteredData,
    id: data._id,
});