import c from '../Profile.module.css';
import { useState } from 'react';
import { createPortal } from 'react-dom';
import Modal from '../Modal/Modal';
const TransactionItem = (props) => {
const modalRoot = document.querySelector('#root > div');
const [showModal, setShowModal] = useState(false);
const short = str => str.substring(str.length - 4) + '...' + str.substring(0, 5);
const handleClose = () => {
setShowModal(false);
}
return (
<div className={c.transaction_item} onClick={() => setShowModal(true)}>
<div className={c.transaсtion_data}>
<div className={c.icon}><span>$</span></div>
<div className={c.transaction_info}>
{props.type === "+" ? 'Пополнение' : 'Перевод'}
<div className={c.transaction_where}>{short(props.from)} -> {short(props.to)}</div>
</div>
</div>
<span className={c.transaction_total}>{props.type + props.total}</span>
{showModal && createPortal(
<Modal onClose={handleClose} date='23.05.2024 в 09:41' {...props} />,
modalRoot
)}
</div>
)
}
export default TransactionItem;
I'm experiencing difficulty in closing the modal window as expected. However, an alternative approach that seems to work is:
const handleClose = () => {
setTimeout(() => {
setShowModal(false);
}, 0)
}
The strange behavior of the modal window closure without the setTimeout workaround raises questions. Could there be any specific reasons for this and are there other solutions available?