Minha expectativa: criar um botão que abre um modal para o usuário inserir informações e essas informações virarem um card a ser mostrado em tela.
O problema: Fiz um exemplo no CodeSandbox que exemplifica bem o meu problema, apesar de não reproduzir exatamente o meu cenário: https://codesandbox.io/s/ecstatic-pike-p9kud?fontsize=14&hidenavigation=1&theme=dark
Se você abrir o modal e depois apertar em fechar tudo ocorre bem. Mas, ao clicar do lado de fora do modal ou mesmo dentro dele, um erro é lançado na tela (cannot read property "" of undefined). Na minha cabeça, se uma condição é do tipo falsy, o JS simplesmente pula para a próxima condição. Mas não é o que está acontecendo. O JS (ou o React) está "exigindo" que todas as condições sejam truthy para que ele continue percorrendo as condições.
Segue o meu código real:
const [modalStatus, setModalStatus] = React.useState(false);
React.useEffect(() => {
// o estado modalStatus é alterado para true ao clicar em um botão que abre o modal
if (modalStatus) {
const modalClick = (event) => {
// aqui, todas as tags que envolvem o clique do usuário são capturadas
const clickPathElements = [...event.path];
// a função abaixo retorna um objeto contendo o nome de todas tags (chave) e o id e class
// (valores)
const getElementsAttributes = clickPathElements.reduce((prev, cur) => {
if (cur.id || cur.classList) {
const [curId, curClass] = [cur.id, cur.classList[0]];
return {
...prev,
[cur.tagName.toLowerCase()]: { id: curId, class: curClass },
};
}
return prev;
}, {});
// aqui começa o malabarismo mental
// se o clique não for no modal, o valor da div (que é o elemento que segura o modal) é undefined
// e o modal é fechado
if (getElementsAttributes.div === undefined) {
setModalStatus(!modalStatus);
}
// se o clique foi no botão fechar o modal e o valor da div não for undefined, o modal é fechado
else if (
getElementsAttributes.button.id === "close" &&
getElementsAttributes.div !== undefined
) {
setModalStatus(!modalStatus);
}
// por fim, se o clique foi na div e não foi no botão de fechar, ou seja, o clique foi no modal, ele
// continua aberto
else if (
getElementsAttributes.div !== undefined &&
getElementsAttributes.button === undefined
) {
console.log("funciona");
}
};
window.addEventListener("click", modalClick);
return () => window.removeEventListener("click", modalClick);
}
}, [modalStatus]);
O código acima funciona somente se estiver nesta ordem exata. Se o terceiro else if estiver no lugar do segundo else if, o mesmo erro do exemplo do codesandbox é retornado.
undefined
, o que causa um erro em JavaScript. Na maioria dos casos, tentar acessar um valor de um objeto que não existe não faz sentido. No entanto, você pode utilizar o encadeamento opcional nesse caso (ao tentar acessar alguma propriedade de um objeto que pode ser nullish).