0

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.

2
  • 1
    O problema é que você está tentando acessar propriedades de 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). Commented 16/12/2020 às 1:33
  • 1
    @LuizFelipe Cara, sem palavras. Muito obrigado mesmo. Você conseguiu me ajudar a resolver o problema. Se quiser criar uma resposta, vou marcá-la como correta com todo prazer. Commented 16/12/2020 às 11:48

0

Pesquise outras perguntas com a tag .