Displaying a value in a React component using material-ui's TextField

Question

Displaying a value in a React component using material-ui's TextField

Can anyone help me with printing the email a user enters into the textfield within the Dialog when a button is clicked? I have been struggling to achieve this due to my function's structure. Any guidance would be greatly appreciated.

export default function ConsultantsHeader (props) {
  
  
  return (
            <div>
      
            <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
              <DialogTitle id="dialog-title">Invite Consultant</DialogTitle>
              <DialogContent>
                <DialogContentText>
                  To invite a new X, please enter their email below:
                </DialogContentText>
                <TextField
                  autoFocus
                  margin="dense"
                  id="email"
                  label="Email Address"
                  type="email"
                  fullWidth
                  color="secondary"
                  variant="outlined"
                />
              </DialogContent>
              <DialogActions>
                <Button 
                color="inherit"
                size="small"
                onClick={handleClose} >
                  Cancel
                </Button>
                <Button 
                  onClick={inviteConsultant}
                  variant="contained"
                  color="secondary"
                  size="small">
                Send Invite
                </Button>
              </DialogActions>
            </Dialog>
    </div>
  );
}

javascript css node.js reactjs material-ui

Answer 1

Answer №1

This is how I accomplished it:

    const [email, setEmail] = useState('');

  const submit = (event) => {
    const myEmail = email;

    console.log(email);

    event.preventDefault();
  };

Additionally,

<TextField
              autoFocus
              margin="dense"
              id="email"
              label="Email Address"
              type="email"
              fullWidth
              color="secondary"
              variant="outlined"
              value={email}
              onChange={(event) => {
                setEmail(event.target.value);
              }}
            />
          </DialogContent>
          <DialogActions>
            <Button 
            color="inherit"
            size="small"
            onClick={handleClose} >
              Cancel
            </Button>
            <Button 
              onClick={inviteConsultant}
              variant="contained"
              color="secondary"
              size="small"
              onClick={(event) => submit(event)}>
              Send Invite
            </Button>

Answer 2

This is how I accomplished it:

    const [email, setEmail] = useState('');

  const submit = (event) => {
    const myEmail = email;

    console.log(email);

    event.preventDefault();
  };

Additionally,

<TextField
              autoFocus
              margin="dense"
              id="email"
              label="Email Address"
              type="email"
              fullWidth
              color="secondary"
              variant="outlined"
              value={email}
              onChange={(event) => {
                setEmail(event.target.value);
              }}
            />
          </DialogContent>
          <DialogActions>
            <Button 
            color="inherit"
            size="small"
            onClick={handleClose} >
              Cancel
            </Button>
            <Button 
              onClick={inviteConsultant}
              variant="contained"
              color="secondary"
              size="small"
              onClick={(event) => submit(event)}>
              Send Invite
            </Button>

Displaying a value in a React component using material-ui's TextField

Answer №1

Similar questions

Guide to positioning an image absolutely within a div

How to activate a window that's been minimized in Chrome

Align dropdown navigation menu/sorting dropdown in the same position as the button

The selector often yields varying results when used in a traditional browser versus when it is utilized with Selenium

What steps can be taken to address the JavaScript error that states: Error : TypeError: $("j2t-temp-div").down(".j2t_ajax_message") is not defined?

"Aligning two images side by side in a horizontal

The Carousel is covering up my Mega-Menu and it is not visible on top

challenges faced when sending requests through nginx and express router

The debounce function seems to be malfunctioning as I attempt to refine search results by typing in the input field

Obtain SVG icons seamlessly in Next.js

How can one change the data type specified in an interface in TypeScript?

Tips for Maintaining User Data Across Pages in React using React-Router-Dom and Context

What is the best method to transfer information from a What You See Is What You Get editor to a database using Vue.js?

The issue of conflicting dependencies arises between [email protected] and @apollo/[email protected]

NuxtJS using Babel 7: the spread operator persists in compiled files

I need to condense my layout from three columns to just two columns in HTML

How to identify generic return type in TypeScript

Error encountered while attempting to update using PostgreSQL in Sequelize Database

Is it necessary to use "require('module/component')" if component.js is not located in the root of the module?

Using jQuery, how can I add value to every input when the option is changed?