schema-for-reactjs-block04.js

// Updating the first approach (non schema-based)

const handleSubmit = async ({
  fname: firstName,
  lname: lastName,
  image: imageURL
}) => {
  const response = await fetch('https://myserver.com/api/user', {
    method: 'POST',
    body: JSON.stringify({
      firstName,
      lastName,
      imageURL,
    }),
  });
  // ...
};

// Schema-based using Yup

const schema = Yup.object().shape({
  firstName: Yup.string(),
  lastName: Yup.string(),
  avatarURL: Yup.string(),
});

const handleSubmit = async (formValues) => {
  const data = schema
    .clone()
    .from('fname', 'firstName')
    .from('lname', 'lastName')
    .from('image', 'avatarURL')
    .cast(formValues);
  const response = await fetch('https://myserver.com/api/user', {
    method: 'POST',
    body: JSON.stringify(data),
  });
  // ...
};