Best way to manage Dialogs in React - reactjs

Question

I wonder if there is not a better way to manage the open and close of Dialogs in a functional component? You can find an example below:
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import EditDialog from './EditDialog';
import DeleteDialog from './DeleteDialog';
const ContactCard = ({ contact }) => {
const [editOpen, setEditOpen] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
const handleEditOpen = () => {
setEditOpen(true);
};
const handleEditClose = () => {
setEditOpen(false);
};
const handleDeleteOpen = () => {
setDeleteOpen(true);
};
const handleDeleteClose = () => {
setDeleteOpen(false);
};
const { type, firstName, lastName, phoneNumber, mail } = contact;
return (
<>
<div className={classes.main}>
{/* All my contact informations */}
</div>
<EditDialog handleClose={handleEditClose} open={editOpen} />
<DeleteDialog handleClose={handleDeleteClose} open={deleteOpen} />
</>
);
};
ContactCard.propTypes = {
contact: PropTypes.object.isRequired
};
export default ContactCard;
I think this is super redundant but I cannot find a nicer way to manage several different dialogs.
const handleEditOpen = () => {
setEditOpen(true);
};
const handleEditClose = () => {
setEditOpen(false);
};
const handleDeleteOpen = () => {
setDeleteOpen(true);
};
const handleDeleteClose = () => {
setDeleteOpen(false);
};
Many thanks for your time and advice!

Answer 1

To reduce some of the redundancy of your code, you could set the open/close in one function, by essentially toggling the current state. I did mine inline, but you could still create a handleEdit function and toggle the state there.
import React, {useState} from "react";
import ReactDOM from "react-dom";
function App() {
const [editCard, setEditCard] = useState(false)
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={() => setEditCard(!editCard)}>Toggle Edit</button>
{editCard && <div>Card is open for editing</div>}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here is another example with your code. I didn't run it, but it should look something like this.
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import EditDialog from './EditDialog';
import DeleteDialog from './DeleteDialog';
const ContactCard = ({ contact }) => {
const [editOpen, setEditOpen] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
const handleEdit = () => {
setEditOpen(!editOpen);
};
const handleDelete = () => {
setDeleteOpen(!deleteOpen);
};
const { type, firstName, lastName, phoneNumber, mail } = contact;
return (
<>
<div className={classes.main}>
{/* All my contact informations */}
</div>
{
editOpen && <EditDialog handleEdit={handleEdit} />
}
{
deleteOpen && <DeleteDialog handleClose={handleClose} />
}
</>
);
};
ContactCard.propTypes = {
contact: PropTypes.object.isRequired
};
export default ContactCard;

Answer 2

The responsibility of open the dialog should be of the main component. This way the modal is only rendered if the state property is true.
Another tip is use <React.Fragment> insted <>
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import EditDialog from './EditDialog';
import DeleteDialog from './DeleteDialog';
const ContactCard = ({ contact }) => {
const [editOpen, setEditOpen] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
const handleEditOpen = () => {
setEditOpen(!editOpen);
};
const handleDeleteOpen = () => {
setDeleteOpen(!deleteOpen);
};
const { type, firstName, lastName, phoneNumber, mail } = contact;
return (
<React.Fragment>
<div className={classes.main}>
{/* All my contact informations */}
</div>
{
editOpen && <EditDialog handleClose={handleEditOpen} />
}
{
deleteOpen && <DeleteDialog handleClose={handleDeleteOpen} />
}
</React.Fragment>
);
};
ContactCard.propTypes = {
contact: PropTypes.object.isRequired
};
export default ContactCard;

Answer 3

To incapsulate logic of changing dialog opening state, I'd recommend to create separate hook:
const useToggle = (defaultValue) => {
return useReducer((value) => !value, !!defaultValue)
}
This hook is basically useState but setState function isn't waiting for argument to update state, it updates state with the inverse of current state.
This might be useful while working with dialogs:
const ContactCard = () => {
const [editOpen, toggleEditOpen] = useToggle(false);
const [deleteOpen, toggleDeleteOpen] = usetoggle(false);
return (
<>
<div className={classes.main}>
{/* All my contact informations */}
</div>
{editOpen && <EditDialog handleEdit={toggleEditOpen} />}
{deleteOpen && <DeleteDialog handleClose={toggleDeleteOpen} />}
</>
);
};