TypeError: Cannot destructure property 'register' of 'Object(...)(...)' as it is undefined.

[Isa1Maria]

Hi Kyle! First of all, great tutorial!

I've done everything like you (your "signup" === my "register") and this error still occurs to me and I'm not capable of finding out what's wrong.
Would you please help me?

I've written like this:

``
import React, { useRef, useState } from "react";
import { Form, Button, Card, Alert } from "react-bootstrap";
import { useAuth } from "../contexts/AuthContext";
import { Link, useHistory } from "react-router-dom";

export default function Register() {
const nameRef = useRef()
const usernameRef = useRef()
const emailRef = useRef()
const passwordRef = useRef()
const confirmPasswordRef = useRef()
const { register } = useAuth()
const [error, setError] = useState("")
const [loading, setLoading] = useState(false)
const history = useHistory()

async function handleSubmit(e) {
e.preventDefault()

if (passwordRef.current.value !== confirmPasswordRef.current.value) {
  return setError("Passwords don't match!")
}

try {
  setError("")
  setLoading(false)
  setLoading(true)
  await register(emailRef.current.value, passwordRef.current.value)
history.push("/")
} catch {
  setError("Failed to create an account.")
}

}´´

Thank you for your attention!

[KushalBiyani]

may be using authprovider in the app.js file will work and wrapping the component inside it

import { AuthProvider } from "./context/AuthContext"

[valentinmagot]

I have the same issue and I also used authprovider in app.js. Does anyone have a solution for this issue ?

Thanks

[THEORIGINITE]

Hi Kyle! First of all, great tutorial!

I've done everything like you (your "signup" === my "register") and this error still occurs to me and I'm not capable of finding out what's wrong.
Would you please help me?

I've written like this:

``
import React, { useRef, useState } from "react";
import { Form, Button, Card, Alert } from "react-bootstrap";
import { useAuth } from "../contexts/AuthContext";
import { Link, useHistory } from "react-router-dom";

export default function Register() {
const nameRef = useRef()
const usernameRef = useRef()
const emailRef = useRef()
const passwordRef = useRef()
const confirmPasswordRef = useRef()
const { register } = useAuth()
const [error, setError] = useState("")
const [loading, setLoading] = useState(false)
const history = useHistory()

async function handleSubmit(e) {
e.preventDefault()

if (passwordRef.current.value !== confirmPasswordRef.current.value) {
  return setError("Passwords don't match!")
}

try {
  setError("")
  setLoading(false)
  setLoading(true)
  await register(emailRef.current.value, passwordRef.current.value)
history.push("/")
} catch {
  setError("Failed to create an account.")
}

}´´

Thank you for your attention!

[THEORIGINITE]

please if anyone has got the solution please tell me

[Ayan-Ali]

You are using the user or any property related to user before the user is defined for example you are maybe displaying the user email on home page before user has logged in if this is the case simply force the user to login before reaching your home page

…

On Mon, Feb 15, 2021, 11:21 PM THEORIGINITE ***@***.***> wrote: please if anyone has got the solution please tell me — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#7 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASCVDQRRZ4LW2Y5SO4CUR6TS7FQ25ANCNFSM4WDP4GOA> .

[apshada]

In index.js File
wrap up your app Component with Auth Provider

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import "bootstrap/dist/css/bootstrap.min.css";
import { AuthProvider } from "./contexts/AuthContext";

ReactDOM.render(
  <AuthProvider>
    <App />
  </AuthProvider>,
  document.getElementById("root")
);

https://ankurraina.medium.com/reactjs-pass-functions-through-context-typeerror-cannot-destructure-property-of-450a8edd55b6

[ghost]

What happens if you switch it back to signup? is signup a function in the AuthContext? Also check what apshada said. I had a similar error and looking at these 3 things helped me.