0

So I have a following dialog:

<Dialog>
  <DialogContent sx={{ display: "flex", flexDirection: "column" }}>
    <TextField
      id="item-name"
      label="Item Name"
    />
    <TextField
      id="item-description"
      label="Item Description"
      multiline
    />
  </DialogContent>
  <DialogActions>
    <Button onClick={onAddDialogClose}>Cancel</Button>
    <Button onClick={onAddNewItem}>Add Item</Button>
  </DialogActions>
</Dialog>

I want to make a REST API call with data from those fields on "Add Item" button click. How do I get those values from <TextField>s?

1 Answer 1

3

You should make your TextFields controlled component by adding state to them:

  const [itemName, setItemName] = useState('')
  const [itemDest, setItemDest] = useState('')

  const onAddNewItem = () => {
    api.call(itemName, itemDest) // or whatever you want
    console.log(itemName)
    console.log(itemDest)
    setItemName('')
    setItemDest('')
  }

  return (
    <Dialog>
      <DialogContent sx={{ display: 'flex', flexDirection: 'column' }}>
        <TextField
          id="item-name"
          label="Item Name"
          value={itemName}
          onChange={e => {
            setItemName(e.target.value)
          }}
        />
        <TextField
          id="item-description"
          label="Item Description"
          multiline
          value={itemDest}
          onChange={e => {
            setItemDest(e.target.value)
          }}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={onAddDialogClose}>Cancel</Button>
        <Button onClick={onAddNewItem}>Add Item</Button>
      </DialogActions>
    </Dialog>
  )
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.