-2

Tenho um botão que altera a visibilidade do meu modal e coloca como true, depois disso a intenção era mostrar o modal em tela como se fosse um alert.

const Cadastro = () => {
  let history = useHistory();

  const [ isModalVisibel, setIsModalVisible ] = useState(false);

  function login({ username, user, password, selectOption, selectOptionMonth, selectOptionYear }) {
    const data_aniversario =
      selectOption + "/" + selectOptionMonth + "/" + selectOptionYear;
    const dados = {
      nome_pessoa: username,
      data_nascimento: data_aniversario,
      email: user,
      senha: password,
    };

    console.log(dados.nome_pessoa);
    return(
      <div>
        {isModalVisibel 
        ? <Modal onClose={() => setIsModalVisible(false)}>
            <h1>Janela de informações</h1>
          </Modal>
        : null
        }
      </div>
    )

Abaixo vou deixar o jeito que estou usando o botão. OBS: O botão estão dentro do de um form

<button onClick={() => setIsModalVisible(true)} type="submit">Cadastrar</button>

1 Resposta 1

0

Você deveria passar isModalVisibel como props para o component Modal e fazer essa validação dentro do componente. Agora o botão com a função setIsModalVisible(true) deve ser chamado dentro do contexto do componente login (não sei onde esta renderizando o botão exatamente).

Provavelmente o isModalVisibel não está alterando o valor.

const Modal = ({ show, onClose }) => (
  show && (
    <div>
      <h1>Modal está aberto</h1>
      <button onClick={onClose}>x</button>
    </div>
  )
)

const Cadastro = () => {
  const [isModalVisibel, setIsModalVisible] = useState(false);

    return (
      <div>
        <Modal show={isModalVisibel} onClose={() => setIsModalVisible(false)}>
          <h1>Janela de informações</h1>
        </Modal>
        <button onClick={() => setIsModalVisible(true)}>Abrir Modal</button>
      </div>
    );
  }
};

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .