Currently, I am using Material-UI within a React project and have a component set up like this:
const UserDetail = (props: ListDetailProps) => {
const oldpassword = useRef<TextFieldProps>(null);
const newpassword = useRef<TextFieldProps>(null);
const againpassword = useRef<TextFieldProps>(null);
const handlePasswordChange = async () => {
console.log(newpassword.current?.value); //expecting the password value but getting undefined
console.log(againpassword.current?.value); //expecting the password value but getting undefined
}
return (<>
<p>old password: <TextField ref={oldpassword} label="old password" type="password" /></p>
<p>new password: <TextField ref={newpassword} label="new password" type="password" /></p>
<p>new password: <TextField ref={againpassword} label="new password again" type="password" /></p>
<button onClick={handlePasswordChange}>submit</button>
</>
)
}
I am trying to retrieve the value of the TextField reference but it returns as undefined. Is there a way to obtain the value of the TextField reference?
I previously came across an answer on: React: How to get values from Material-UI TextField components,
However, that solution was for a Form button. If I do not have a form, how can I achieve this?