Show Data single Profile from Database with Form (GET API With ID)

 Show Dat single Profile from Database  with Form

export default function Text() {

    const [formData, setFormData] = useState({

        workername: "",

        workertype: "",

    });

    useEffect(() => {

        // Fetch user profile data from the API and populate the form

        const fetchUserProfile = async () => {

            try {

                const response = await fetch('http://------/---/--/worker/2', {

                    method: 'GET',

                    headers: {

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

                        // Add any authorization headers if required

                    },

                });

                if (!response.ok) {

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

                }

                const userData = await response.json();

                // console.log(userData['worker']);

                setFormData(userData['worker']);

            } catch (error) {

                console.error('Error fetching user profile:', error.message);

            }

        };

        fetchUserProfile();

    }, []);

    console.log("Data: ", formData);

    const handleInputChange = (e) => {

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

    };

    const handleFormSubmit = async (e) => {

        e.preventDefault();

    }

    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>

        </>

    );

}