Элемент HTML-диалога в React.js ⇐ Html

[Anonymous]

Я переделываю один из своих старых проектов, используя реакцию+TS+Tailwind, и решил использовать element для модального окна вместо создания классического модального элемента — я выбрал его из-за доступности.
Однако я столкнулся с некоторыми проблемами. В настоящее время я могу настроить этот компонент на открытие, когда он использует атрибут open, но тогда он открывается как диалог, а не как модальный. Я не знаю, где вызвать метод .showModal() и что именно, чтобы открыть его как модальное окно (хех, мне кажется, это проще сделать в vanilla js: P)
Это мой модальный компонент

Код: Выделить всё

interface Props {
showModal: HandleModal
edit: (id: number, value: string) => void
closeModal: React.Dispatch
}

const Modal = ({ showModal, edit, closeModal }: Props) => {
let modalContent = (

Please input a correct task in the input field
 closeModal({ show: false })}>Close

)

let modalTitle = 'Error'
return (


{modalTitle}

{modalContent}

)
}
export default Modal

Это мой файл приложения

Код: Выделить всё

function App() {
const [toDos, setToDos] = useState(DummyToDos)
const [showModal, setShowModal] = useState({
show: false,
})

const addToDo = (todo: Todo) => {
setToDos(prevState => {
return [todo, ...prevState]
})
}

const editToDo = (id: number, value: string) => {
const editedToDos = [...toDos].map(todo => {
if (todo.id === id) {
todo.text = value
}
return todo
})
setToDos(editedToDos)
setShowModal({
show: false,
})
}

const deleteToDo = (id: number) => {
const newToDos = toDos.filter(todo => todo.id !== id)
setToDos(newToDos)
}
const completeToDo = (id: number) => {
const completedToDos = [...toDos].map(todo => {
if (todo.id === id) {
todo.complete = !todo.complete
}
return todo
})
setToDos(completedToDos)
}

return (






)
}

export default App

Я могу открыть этот компонент, изменив атрибут open на true, но он открывается как диалоговый, а не модальный.
Я пробовал установить для aria-modal значение true, чтобы заставить его открываться как модальный — к сожалению, это не работает.
Я не знаю, где и для чего именно мне следует вызывать метод .showModal()

Подробнее здесь: https://stackoverflow.com/questions/765 ... n-react-js