Multi Step Form | ReactJs, useContext, React-Router, TailwindCss

Multi Step Shape Challenge

Resolving this challenge with react-router for management steps pages of this form and Igave some private routes. I used context for states and validation for inputs.

I had a problem that I couldn't resolve:

./hooks/useValidateChangePage.js

const onValidateChangePage = () => {
  if (name && email && phone) {
    onChangePage()
    return
  }
  // onValidate function to change state of errors on useSubscription when Next Step Button is click it to show "This field is required" on every input field
  // each calls is not taking last calls change of errors state and showing only last call change
  // Idk why this happen and how resolve it
  onValidate('name', name)
  onValidate('email', email)
  onValidate('phone', phone)
  onAnimate()
}

./hooks/useSubscription.js

const validate = (name, value) => {
  if (!value) {
    return 'This field is required'
  }
  if (name === 'email' && !value.includes('@')) {
    return 'Invalid email address'
  }
  return ''
}
const onValidate = (name, value) => {
  const errorMessage = validate(name, value)
  setErrors({
    ...errors,
    [name]: errorMessage
  })
}

// show in console every change of errors for debug calls of onValidate on useValidateChangePage custom hooks that is used on NavigationButtons component.
console.log(errors)

All feedback is wellcome!