import React, { useState } from 'react';
import Typography from '@material-ui/core/Typography';
import { Button, Container } from '@material-ui/core';
import { TextField } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
const useStyle = makeStyles({
field: { marginTop: 20, marginBottom: 20, display: 'block' },
});
export default function Create() {
const classes = useStyle();
const [name, setName] = useState('');
const [phnNO, setPhnNo] = useState('');
const [address, setAddress] = useState('');
const [nameError, setnameError] = useState(false);
const [phnNoError, setphnNOError] = useState(false);
const handleSubmit = (e) => {
e.preventDefault();
setnameError(true);
setphnNOError(true);
if (name == '') {
setnameError(true);
}
if (phnNO == '') {
setphnNOError(true);
}
if (name && phnNO && address) {
console.log(name, phnNO, address);
}
};
return (
<form noValidate autoComplete="off" onSubmit={handleSubmit}>
<TextField
onChange={(e) => setName(e.target.value)}
className={classes.field}
label="Your Name"
variant="outlined"
color="secondary"
fullWidth
required
error={nameError}
/>
<TextField
onChange={(e) => setPhnNo(e.target.value)}
className={classes.field}
label="Your mobile number"
variant="outlined"
color="secondary"
fullWidth
required
error={phnNoError}
/>
<TextField
onChange={(e) => setAddress(e.target.value)}
className={classes.field}
label="Your address"
multiline
rows={4}
variant="outlined"
color="secondary"
fullWidth
/>
<Button
className={classes.buttn}
variant="outlined"
color="primary"
align="left">
Register
</Button>
</form>
);
}
You need to have the type of the button as submit
to make an actual form submission using the button.
<Button
className={classes.buttn}
type="submit"
variant="outlined"
color="primary"
align="left"
>
Register
</Button>