There seems to be a issue with the dialog form where new data selection results in displaying the original data incorrectly. Only by closing and reopening the dialog does it show the correct values. I suspect there might be some trickery going on with the useEffect and useState, but I'm unsure how to resolve it.
To test this, click on the Button Data 1 to confirm that the data is correct, and then click on Data 2. You will notice that it displays the data corresponding to Data 1 instead of Data 2, which is not the desired outcome.
In both the demo and the actual implementation, the state selectedId is necessary as it is referenced elsewhere.
import React, { useState, useCallback, useEffect } from "react";
import SomeDialog from "./SomeDialog";
import { FormData } from "./FormData";
import { Button } from "@mui/material";
let initialFormData: FormData[] = [
{ name: "data1", id: 0, location: "here" },
{ name: "data2", id: 1, location: "there" }
];
function Demo(): any {
const [selectedData, setSelectedData] = useState<FormData>(
initialFormData[0]
);
const [selectedId, setSelectedId] = useState<number>(0);
const [dialogOpen, setDialogOpen] = useState<boolean>(false);
const handleDialogOpen = useCallback(() => setDialogOpen(true), []);
const handleDialogClose = useCallback(() => setDialogOpen(false), []);
const onClick = (index: number) => {
setSelectedId(index);
handleDialogOpen();
};
useEffect(() => {
let data = initialFormData.find((data) => data.id === selectedId);
setSelectedData(data);
}, [selectedId]);
return (
<div style={{ height: "100vh", width: "100vw" }}>
<Button
onClick={() => {
onClick(0);
}}
>
Data 1
</Button>
<Button
onClick={() => {
onClick(1);
}}
>
Data 2
</Button>
<SomeDialog
open={dialogOpen}
onClose={handleDialogClose}
data={selectedData}
/>
</div>
);
}
export default Demo;
Dialog Form
import React, { useState, useEffect, ChangeEvent } from "react";
import TextField from "@mui/material/TextField";
import { Button, Dialog, Box } from "@mui/material";
import { FormData } from "./FormData";
interface SomeDialogProps {
open: boolean;
onClose: () => void;
data: FormData;
}
function SomeDialog(props: SomeDialogProps) {
const { open, onClose, data } = props;
const [formData, setFormData] = useState<FormData>(data);
useEffect(() => {
setFormData(data);
}, [data]);
function handleDataInputChange(event: ChangeEvent<HTMLInputElement>) {
const { id, value } = event.target;
setFormData({ ...formData, [id]: value });
}
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
console.info(formData);
onClose();
}
return (
<Dialog
open={open}
onClose={onClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box
component="form"
sx={{
"& .MuiTextField-root": { m: 1, width: "25ch" }
}}
noValidate
autoComplete="off"
onSubmit={handleSubmit}
>
<TextField
id="id"
label="Id"
defaultValue={formData.id}
onChange={handleDataInputChange}
/>
<TextField
id="name"
label="Name"
defaultValue={formData.name}
onChange={handleDataInputChange}
/>
<TextField
id="location"
label="Location"
defaultValue={formData.location}
onChange={handleDataInputChange}
/>
<Button type="submit">Submit</Button>
</Box>
</Dialog>
);
}
export default SomeDialog;
export interface FormData {
name: string;
id: number;
location: string;
}