Required TextField validation on Material-UI - reactjs

Question

If something is written on the required TextField then everything will be okay but if the required TextField is blank then it will show me an error message on a helperText. But the problem is I can't use lenth on a if condition where I have set an onClick handler or method but I can use lenth on an onChange handler or method. If I can't use lenth then how will I know that something is written on required TextField. Here is my code:
import React, { Component } from 'react';
import { Container, Grid, Typography, TextField, Button } from '#material-ui/core';
import { withStyles } from "#material-ui/core/styles";
const styles = theme => ({
mT: {
marginTop: theme.spacing(1)
},
mR: {
marginRight: theme.spacing(3)
}
});
class Account extends Component {
constructor(){
super()
this.state={
accname: '',
helperText: '',
error: false
}
this.onChange = this.onChange.bind(this);
this.onClick = this.onClick.bind(this);
}
onChange = (event) => {
this.setState({[event.target.name]:event.target.value})
}
onClick = (event) => {
if (event.target.required > 0) {
this.setState({ helperText: '', error: false });
} else {
this.setState({ helperText: 'Invalid format', error: true });
}
}
render() {
const { classes } = this.props;
return (
<React.Fragment>
<Container>
<Grid container
spacing={2}>
<Grid item
xs={12}
sm={12}
md={12}
lg={12}
xl={12}>
<Typography className={classes.mT}
variant="h4"
color="textPrimary">
Add Account
</Typography>
</Grid>
<Grid item
xs={12}
sm={12}
md={12}
lg={12}
xl={12}>
<TextField className={classes.mR}
label="Account Name"
name="accname"
type="text"
helperText={this.state.helperText}
onChange={this.onChange}
value={this.state.accname}
error={this.state.error}
variant="outlined"
color="primary"
size="small"
autoFocus
required />
<Button variant="contained"
color="primary"
onClick={this.onClick} >
Submit
</Button>
</Grid>
</Grid>
</Container>
</React.Fragment>
);
}
}
export default withStyles(styles, { withTheme: true })(Account);

Answer 1

onClick = () => {
if(
this.state.accname.trim() != '' &&
this.state.firstName.trim() != '' &&
this.state.lastName.trim() != ''
){
//Your API call here
}
else{
alert("fill the empty spaces!");
}