React - Axiost put request get weird result

Question

I am working on my project with a backend. and currently working on a component which performs a put request to update details of a customer bean. however, I am experiencing a weird behavior.

Component:

function UpdateCustomer(props): JSX.Element {
    
    const history = useHistory();
    const [skipCount, setSkipCount] = useState(true);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    
    async function formData() {
  
      try {
        const response = await axios.put<CustomerModel>(globals.adminUrls.updateCustomer + props.location.state.id, {
          firstName: firstName,
          LastName: lastName,
          email: email,
          password: password
        });
  
        const updated = response.data;
        store.dispatch(customerUpdatedAction(updated));
        notify.success(CUSTOMER_SccMsg.CUSTOMER_UPDATED)
  
      }
      catch (err) {
        notify.error(err);
      }
    }
  
    const handleSubmit = (e) => {
      e.preventDefault();
      formData();
    }
  
    useEffect(() => {
      if (skipCount) setSkipCount(false);
      if (!skipCount) formData();
  
    }, []);
  
    return (
      <div className="custom-field">
        <h2>Update Customer</h2>
        <div>
          <form onSubmit={handleSubmit} >
              
            <label>First name</label>
            <input type="text" name="firstName" onChange={(e) => { setFirstName(e.target.value) }} />
            <label>Last name</label>
            <input type="text" name="lastName" onChange={(e) => { setLastName(e.target.value) }} />
            <label>Email</label>
            <input type="text" name="email" onChange={(e) => { setEmail(e.target.value) }} />
            <label>Password</label>
            <input type="text" name="password" onChange={(e) => { setPassword(e.target.value) }} />
  
            <input type="submit" name="submit" />
          </form>
        </div>
      </div>
    );
  }
export default UpdateCustomer;

backend Service:

public void updateCustomer(@Valid int id, CustomerDto customerDto) throws  DoesNotExistException {

        Customer customerDao = customerMapper.toDao(customerDto);

        if (!custRepo.existsById(id))
            throw new DoesNotExistException("Customer does not exist");

        custRepo.saveAndFlush(customerDao);

backend Controller:

  @PutMapping(value = "update/customer/{id}")
    @ResponseStatus(HttpStatus.ACCEPTED)
    @Override
    public void updateCustomer(@PathVariable int id, @RequestBody CustomerDto customerDto) throws DoesNotExistException {
        adminService.updateCustomer(id, customerDto);
    }

Result I am getting:

1. I am able to save all fields into a const apart from lastName for some reason. it behaves exactly like the other fields. however, this specific field sends null to server while other fields send the input values.

2. Instead of performing an update to bean it just adds this as a seperate bean.

Why is this weird?

I have an identical component for updating a company and it seems to work just fine. why does this component behave differently?

Hope someone can put a hand on the problem.

Thanks.

Answer 1

You put LastName in the request body, check below image:

I think there is a mistake here, it looks like should be lastName, not LastName.