Create a new Data in Database with Form (POST API)

Create a new Data in Database with Form  

export default function Text() {

    const [formData, setFormData] = useState({

        workername: "",

        workertype: "",

    });

    const handleInputChange = (e) => {

        setFormData({ ...formData, [e.target.id]: e.target.value, });

    };

    const handleFormSubmit = async (e) => {

        e.preventDefault();

        try {

            const response = await fetch("http://--------/api/workerprofile", {

                method: "POST",

                headers: {

                    'Content-Type': 'application/json',

                },

                body: JSON.stringify(formData),

            });

            if (!response.ok) {

                throw new Error(`HTTP error! Status: ${response.status}`);

            }

            const result = await response.json();

            console.log('Product created successfully:', result);

        } catch (error) {

            console.error('Error creating product:', error.message);

        }

    }

   

    const [open, setOpen] = useState(false);

    const handleButtonClick = () => {

        setOpen(true);

    };

    const handleClose = () => {

        setOpen(false);

    };

    return (

        <>

            <form onSubmit={handleFormSubmit} >

                <Box display='flex' xs={12} paddingBottom={2}  >

                    <Typography paddingLeft={3} variant='h4' >Create Account</Typography>

                </Box>

                <TextField

                    required

                    label="Worker Name"

                    id='workername'

                    defaultValue=''

                    variant="outlined"

                    margin="normal"

                    fullWidth

                    type='text'

                    value={formData.workername}

                    onChange={handleInputChange}

                />

                <TextField

                    required

                    label="Worker type"

                    id='workertype'

                    defaultValue=''

                    variant="outlined"

                    margin="normal"

                    fullWidth

                    // type='number'

                    value={formData.workertype}

                    onChange={handleInputChange}

                />

                {/* <Subtitletext name={'User Type'} color="true" /> */}

                <Button fullWidth={true} style={{ color: "black", backgroundColor: 'pink' }}

                    type="submit"

                    variant="contained"

                    margin="normal"

                    onClick={handleButtonClick}

                >

                    Create Account

                </Button>

                <Dialog open={open} onClose={handleClose}>

                    <DialogTitle>Alert</DialogTitle>

                    <DialogContent>

                        <DialogContentText>

                            User Logined Successful.

                        </DialogContentText>

                    </DialogContent>

                    <DialogActions>

                        <Button onClick={handleClose}>OK</Button>

                        <Button onClick={handleClose}>Closed</Button>

                    </DialogActions>

                </Dialog>

            </form>

        </>

    );

}