import React from "react";
import { useRef } from "react";
import AuthButton from "../components/AuthButton";
import AuthContainer from "../components/AuthContainer";
import AuthInput from "../components/AuthInput";
import { signup } from "../firebase"
function Signup() {
const emailRef = useRef();
const passwordRef = useRef();
const passwordConfirmRef = useRef();
async function handleSignup() {
await signup(emailRef.current.value, passwordRef.current.value);
}
return (
<AuthContainer>
<AuthInput ref={emailRef} placeholder=" email" />
<AuthInput ref={passwordRef} type="password" placeholder=" password" />
<AuthInput ref={passwordConfirmRef} type="password" placeholder=" confirm password" />
<div className="flex justify-center text-lg text-gray-500 pt-2 pb-5">
{/* <AuthButton text="sign up" /> */}
<button onClick={handleSignup}>
{
<div className="p-1 rounded-full bg-gray-200 hover:bg-gray-300 bg-opacity-50 text-center h-8 w-20">
sign up
</div>
}
</button>
</div>
</AuthContainer>
);
}
export default Signup;
The above is a component for a Signup page for a web app, and I'm following this video using refs and firebase to work with a button to update the database: https://www.youtube.com/watch?v=_Kv965pA-j8
However, whenever I click the button, I get this error: Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'value')
handleSignup
11 | const passwordConfirmRef = useRef();
12 |
13 | async function handleSignup() {
> 14 | await signup(emailRef.current.value, passwordRef.current.value);
| ^ 15 | }
16 |
17 | return (
View compiled
▶ 19 stack frames were collapsed.
How can I fix this? My original plan had a separate component for the button together, but that wasn't working, so now I'm just trying to get everything to work all in the same component.
AuthInput Code:
import React from 'react'
import { useRef } from "react";
const AuthInput = (props) => {
return (
<div className='pt-2 pb-2 px-20 mx-auto my-auto'>
<input
className="rounded-lg focus:outline-none text-lg placeholder-gray-500"
type={props.type}
ref = {props.ref}
placeholder={props.placeholder}
// later figure out how to automatically indent the placeholder text and the inputted text
/>
</div>
)
}
export default AuthInput
If you want throw parent refs to child components you must use forwardRef in child. Docs
Example of correct AuthInput component:
import { forwardRef } from "react";
const AuthInput = forwardRef(({ ...otherProps }, ref) => {
return (
<div className="pt-2 pb-2 px-20 mx-auto my-auto">
<input
className="rounded-lg focus:outline-none text-lg placeholder-gray-500"
type={otherProps.type}
ref={ref}
placeholder={otherProps.placeholder}
// later figure out how to automatically indent the placeholder text and the inputted text
/>
</div>
);
});
export default AuthInput;