I have incorporated the material UI error message display into my text field. When I click on the button without entering any text in the field, an error message pops up which pushes down the button. I am looking for a way to prevent this behavior but haven't been able to find a solution.
Below is the code for my form:
<Grid container justify='center' alignContent='center'>
<Grid item xs={12}>
<TextField
id="outlined-full-width"
label="Input"
style={{width:'100%', marginTop:30}}
placeholder="Add A Todo Item "
margin="normal"
InputLabelProps={{
shrink: true,
}}
error={this.state.errorState}
helperText={
this.state.errorState && "Item name can't be blank"
}
size="large"
variant="outlined"
value={newItem}
onChange={handleInput}
/>
</Grid>
</Grid>
<CardActions>
<Grid container justify='center' alignContent='center'>
<Grid item xs={12} md={6}>
<Button
type="submit"
variant="contained"
color='inherit'
fontsize='inherit'
style={styles.add}
startIcon={<AddIcon/>}
>
Add Item
</Button>
</Grid>
</Grid>
</CardActions>
</form>