Passo 13

Instruções

Seria bom mostrar dinamicamente as palavras Show Message ou Hide Message com base no estado isVisible. Anteriormente, você revisou como trabalhar com renderização condicional inline. Você vai aplicar uma lógica semelhante ao texto do botão. Aqui está um exemplo de uso do operador ternário para mostrar condicionalmente as palavras Hide e Show:

<button>{isMenuVisible ? "Hide" : "Show"} Menu</button>

Para a última etapa do workshop, use o operador ternário para exibir condicionalmente as palavras Hide ou Show no botão de mensagem. Coloque a condição antes do texto Message para que ele exiba Show Message ou Hide Message. E com essa última alteração, seu workshop está completo! Teste seu botão para vê-lo em ação.

O que fazer:

Testes:

Quando `isVisible` é `false`, o texto do botão deve dizer `Show Message`.
Quando `isVisible` é `true`, o texto do botão deve dizer `Hide Message`.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Toggle Visibility</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
  <script 
    data-plugins="transform-modules-umd"
    type="text/babel"
    src="index.jsx"
  ></script>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div id="root"></div>
  <script
    data-plugins="transform-modules-umd"
    type="text/babel"
    data-presets="react"
    data-type="module"
  >
    import { ToggleApp } from "./index.jsx";
    ReactDOM.createRoot(document.getElementById("root")).render(<ToggleApp />);
  </script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

#toggle-container {
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#toggle-button {
  padding: 10px 20px;
  border: none;
  background: #007BFF;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#toggle-button:hover {
  background: #0056b3;
}

#message {
  margin-top: 20px;
  font-size: 1.125rem;
  color: #333;
}

Preview