TypeError: Cannot destructure property '' of '' as it is undefined

Question

I want to render the 'password confirmation input' and this 'button' but it doesn't work at all, I really don't know what to do, I can't understand what I need to change. TypeError: Cannot destructure property '' of '' as it is undefined.

There are 2 forms and 2 different pages, one for 'login' and the other for 'registration'

const { titleRegisterButton, buttonFields } = registerButton

const { titleConfirmPassword, confirmPasswordFields } = templateConfirmPassword


ERROR:

Cannot destructure property 'titleRegisterButton' of 'registerButton' as it is undefined.

Cannot destructure property 'titleConfirmPassword' of 'templateConfirmPassword' as it is undefined.

---

I also tried using useState([]) , but it doesn't show up on the pages.

const [buttonFields] = useState([])

const [confirmPasswordFields] = useState([])

---

## FormLogin ##

const registerButton = {
    titleRegisterButton: 'Register',
    buttonFields: [
      {
        titleRegisterButton: 'Register',
        type: 'buttonRegister'
      }
    ]
  }

return (
    <div>
      <Form 
      template={template}
      registerButton={registerButton}
      onSubmit={onSubmit}
      >

      </Form>
    </div>
  )
}

function onSubmit(values: any) {
  console.log(values)
}

---

## FormRegister ##

const templateConfirmPassword = {
    titleConfirmPassword: 'Confirm Password',
    confirmPasswordFields: [
      {
        titleConfirmPassword: 'Password Confirmation',
        type: 'password',
        label: 'Password Confirmation',
        name: 'passwordConfirmation',
        placeholder: 'Confirm Password'
      }
    ]
  }
  

  return (
    <div>
      <Form 
      template={template}
      templateConfirmPassword={templateConfirmPassword}
      onSubmit={onSubmit}
      >

      </Form>
    </div>
  )
}

function onSubmit(values: any) {
  console.log(values)
}

Answer 1

const [register, setRegister] = useState(registerButton);
const [confirm, setConfirm] = useState(templateConfirmPassword);

If you initialize the variable with some values, you should declare state variable and initialize with some values using useState() Hook Function.