pass data from dialog to react function - reactjs

Question

I have a MUI custom dialog, with 1 input text and 2 action buttons (Cancel, Done).
I can pass onClick function etc.. but
I have problem in passing data from this dialog to the actual parent widget, because when I click on "Done" i need to:
save the text
close the dialog
My Dialog
const FormDialog = ({ open, onClose, onSave }) => {
const [value, setValue] = useState("");
const parentToChild = () => {};
if (!open) return null;
return (
<div>
<Dialog open={open} onClose={onClose}>
<DialogTitle>Edit</DialogTitle>
<DialogContent>
<DialogContentText>Add name</DialogContentText>
<TextField
value={value}
onChange={setValue(value)} />
</DialogContent>
<DialogActions>
<Button onClick={onClose}>Cancel</Button>
<Button onClick={() => onSave(value)}>Salva</Button>
</DialogActions>
</Dialog>
</div>
);
and the dialog inside my class:
This is where I should receive the text value
<FormDialog open={open} onClose={() => setOpen(false)} onSave={() => editCategory()} />
const editCategory = (value) => () => {
console.log(value);
setOpen(false);
};

Answer 1

You need to receive the parameter in the onSave parent function
//Before
... onSave={()=>editCategory()}
//After
... onSave={(value)=>editCategory(value)}
But that is not needed since you can pass the function editCategory directly to onSave (editCategory already receives "value"):
... onSave={editCategory}
IMPORTANT
// wrong
const editCategory = (value) => () => {...}
// correct
const editCategory = (value) => {...}
So, finally:
<FormDialog open={open} onClose={() => setOpen(false)} onSave={editCategory} />
const editCategory = (value) => {
console.log(value);
setOpen(false);
};