CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Akhil Suseelan
Akhil Suseelan

Reputation: 217

How to edit a form when it is loaded with values?

I have a form loaded with values when it is rendered by onClick from a component. I need to edit the current values and perform an update operation.

Following is the sandbox link https://codesandbox.io/s/material-demo-forked-e9fju?file=/demo.js.

Should I set the state to implement this?

Upvotes: 0

Views: 253

Answers (1)

Shubham Verma
Shubham Verma

Reputation: 5054

Yes you need to save value in state. And when user click on subscribe fetch that value from state. Here is updated code:

import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import Form from "semantic-ui-react";

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const [value, setValue] = React.useState("Hello");

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

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        aria-labelledby="form-dialog-title"
      >
        <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>
            To subscribe to this website, please enter your email address here.
            We will send updates occasionally.
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="name"
            label="Application Name"
            type="text"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            fullWidth
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Cancel
          </Button>
          <Button onClick={handleClose} color="primary">
            Subscribe
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

Here is the demo: https://codesandbox.io/s/material-demo-forked-ln0xe?file=/demo.js:0-1824

Upvotes: 1

Related Questions