I'm getting two errors the first one is saying that it can destructure. it's saying the error is coming from my signup.js file

Uncaught TypeError: Cannot destructure property 'signup' of '(0 , _contexts_AuthContext__WEBPACK_IMPORTED_MODULE_1__.useAuth)(...)' as it is undefined.
    at SignUp (SignUp.js:9:1)

I'm unable to see what's wrong in my signup.js file

import React, { useRef, useState } from "react";
import { Form, Button, Card, Container, Alert } from "react-bootstrap";
import { useAuth } from "../contexts/AuthContext";

function SignUp() {
  const emailRef = useRef();
  const passwordRef = useRef();
  const passwordConfirmedRef = useRef();
  const { signUp } = useAuth();
  const [error, setError] = useState(" ");
  const [loading, setLoading] = useState(false);

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

    if (passwordRef.current.value === passwordConfirmedRef.current.value) {
      return setError("Passwords do not match");
    }
    try {
      setError("");
      setLoading(true);
      await signUp(emailRef.current.value, passwordRef.current.value);
    } catch {
      setError("Failed to create an account");
    }
    setLoading(false);
  }

  return (
    <React.Fragment>
      <Container
        className="d-flex align-item-center justify-content-center"
        style={{ minHeight: "40vh", marginTop: "10px" }}
      >
        <Card>
          <Card.Body>
            <h2 className="text-center mb-4">Sign Up</h2>
            {error && <Alert variant="danger">{error}</Alert>}
            <Form onSubmit={handleSubmit}>
              <Form.Group id="email">
                <Form.Label>Email</Form.Label>
                <Form.Control
                  type="email"
                  ref={emailRef}
                  required
                ></Form.Control>
              </Form.Group>
              <Form.Group id="password">
                <Form.Label>Password</Form.Label>
                <Form.Control
                  type="password"
                  ref={passwordRef}
                  required
                ></Form.Control>
              </Form.Group>
              <Form.Group id="password-confirm">
                <Form.Label>Password Confirmation</Form.Label>
                <Form.Control
                  type="password"
                  ref={passwordConfirmedRef}
                  required
                ></Form.Control>
              </Form.Group>
              <Button
                disabled={loading}
                className="w-100"
                type="submit"
                style={{ marginTop: "20px" }}
              >
                Sign Up
              </Button>
            </Form>
          </Card.Body>
        </Card>
      </Container>

      <div className="w-100 text-center mt-2">
        Already have an accoutn? Log in
      </div>
    </React.Fragment>
  );
}
export default SignUp;

I'm also not sure i'm supposed to add the AuthProvider tag in the app.jsx file and i am supposed to unsure where to put it.

import React, { useContext, useState, useEffect } from "react";
import { auth } from "../../firebase";

const AuthContext = React.createContext();

function useAuth() {
  return useContext(AuthContext);
}

function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();

  function signup(email, password) {
    auth.createUserWithEmailAndPassword(email, password);
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
    });
    return unsubscribe;
  }, []);
  const value = {
    currentUser,
    signup,
  };
  return <AuthProvider value={value}>{children}</AuthProvider>;
}

export { useAuth, AuthProvider };

CodePudding user response：

createContext need to be initialized with a default value.

const AuthContext = React.createContext({
  currentUser: undefined,
  signup: () => {},
});

CodePudding user response：

There is spell error in your code. The value you are exporting is signup and the value you are destructuring is signUp( letter U is in caps)