I'm looking to transfer the content from a text field in a dialog window to another text field that is not embedded. However, instead of transferring the actual text field value, I'm getting an output of "object Object". Can you help me figure out why it's not working?
Within a functional component, I have created two different states. The purpose of the function "setOriginalTextValue" is to move the value from one state to the other:
export default function TextTransfer() {
const [value, setValue] = React.useState();
const [dialogValue, setDialogValue] = React.useState();
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleChange = (event) => {
setValue({
value: event.target.value,
});
};
const handleDialogValueChange = (event) => {
setDialogValue({
dialogValue: event.target.value,
});
};
const setOriginalTextValue = () => {
setValue({
value: dialogValue,
});
};
return (
<div>
<Button variant="text" color="inherit">
<TextField
id="outlined-multiline-static"
label="Question"
multiline
onClick={handleClickOpen}
rows={4}
value={value}
placeholder="Type here"
onChange={handleChange}
variant="outlined"
style={{
backgroundColor: "white",
}}
/>
</Button>
<Dialog
open={open}
onClose={handleClose}
onExit={setOriginalTextValue}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Dialog Title</DialogTitle>
<DialogContent>
<DialogContentText>Please enter some text below</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Dialog Text"
multiline
rows={4}
onChange={handleDialogValueChange}
fullWidth
onExit={console.log("the dialog value", dialogValue)}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary">
Transfer
</Button>
</DialogActions>
</Dialog>
</div>
);
}