How to extract data from material UI elements and add an onSubmit function to send data to backend

user_12188838 0
Viewed 589

I'm fairly new to react/material-UI.

And I've been following youtube videos and other resources for a project.

I decided to use material-UI for its simplicity.

But I'm now stuck with how to extract data from the inputs in material-UI

I have an alert dialog box that has input as datetime using MaterialUI in my react code.

I need to extract the date and time separately and send the data to the backend

The code(updated) for it is as follows:

export default function AlertDialog() {
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };
    
    return (
        <div>
            <Button
                variant="contained"
                color="default"
                onClick={handleClickOpen}
            >
                Schedule a session
            </Button>
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="dialog-title"
                aria-describedby="dialog-description"
            >
                <DialogTitle id="dialog-title">
                    {"Schedule your session"}
                </DialogTitle>
                <DialogContent>
                    <DialogContentText id="dialog-description">
                        Choose a date and time according to your convenience!
                    </DialogContentText>
                </DialogContent>
                <form className={classes.container} noValidate>
                    <TextField
                        id="datetime-local"
                        label="Enter Date and Time"
                        type="datetime-local"
                        defaultValue="2020-12-12T10:30"
                        className={classes.textField}
                        InputLabelProps={{
                            shrink: true,
                        }}
                    />
                </form>
                <DialogActions>
                    <Button onClick={handleClose}
                        color="primary"
                        onSubmit={onSubmit}>
                        Submit
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

And also, is it easier to use this in a functional component or should I convert it to a class component?

If a class component is easier for this, please give me a small headstart and I'll continue the code.

mern material-ui reactjs backend javascript
2 Answers
user_19291150 
const [dateTimeLocal, setDateTimeLocal] = useState();
  const onInputChange = (event) => {
    setDateTimeLocal(event.target.value);
  };

  return (
    
      <TextField
        id="datetime-local"
        label="Next appointment"
        type="datetime-local"
        defaultValue="2017-05-24T10:30"
        onChange={onInputChange}
        value={dateTimeLocal}
        InputLabelProps={{
          shrink: true
        }}
      />
  );

Please go through - https://reactjs.org/docs/handling-events.html

user_132019840
Related