ref value undefined ReactJs - reactjs

Question

i Used material Design For my login From but when i get console.log in onsubmitForm show ref value undefined...
In the following simple example, both this.UserEmail.value & this.UserPassword.value are undefined when the submit is clicked.
export default class SignIn extends React.Component {
UserEmail= null;
UserPassword=null;
onsubmitForm = (e) =>
{
e.preventDefault();
let EmailData = this.UserEmail.value;
let PassData = this.UserPassword.value;
let data = {EmailData,PassData}
console.log("this is the submit form function");
console.log(data); // I Get Data Obj Undefined
}
render(){
return (
<div>
<form>
<TextField
variant="outlined"
margin="normal"
required
ref={el => this.UserEmail = el}
id="email"
label="Email"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
fullWidth
ref={el => this.UserPassword = el}
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
onClick={this.onsubmitForm}
variant="contained"
color="primary"
>
Login
</Button>
</form>
</div>
);
}
}

Answer 1

The value of the ref is undefined because for Material-UI's API requires that you use inputRef instead of ref to access the input elements inside the nested components.
export default class SignIn extends React.Component {
onsubmitForm = e => {
e.preventDefault();
const email = this.email.value;
const password = this.password.value;
let data = { email, password };
console.log("this is the submit form function");
console.log(data);
};
render() {
return (
<div>
<form>
<TextField
variant="outlined"
margin="normal"
required
inputRef={email => (this.email = email)}
id="email"
label="Email"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
fullWidth
inputRef={password => (this.password = password)}
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<Button
type="submit"
onClick={this.onsubmitForm}
variant="contained"
color="primary"
>
Login
</Button>
</form>
</div>
);
}
}
Working example here