React Toggle Visibility using useState Hook (Show/Hide Example)

📌 INTRODUCTION

In React, controlling what is visible on the screen is a common requirement. Using the useState hook, we can easily show or hide content dynamically.

In this program, we will:

• Toggle visibility of content
• Use state to control UI
• Handle button click events

👉 This concept is widely used in modals, dropdowns, menus, and dashboards.

---

📘 PROBLEM STATEMENT

👉 Develop a program to toggle the visibility of content using state in React.

---

💡 CONCEPTS USED

• useState Hook
• Conditional Rendering
• Event Handling
• JSX

---

🧠 LOGIC EXPLANATION

1. Create a boolean state (true/false)
2. Display content only when state is true
3. Toggle state on button click
4. UI updates automatically

---

💻 PROGRAM CODE

Open src/App.js:

import { useState } from "react";

function App() {
  const [show, setShow] = useState(true);

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Toggle Visibility</h1>

      <button onClick={() => setShow(!show)}>
        {show ? "Hide" : "Show"}
      </button>

      {show && <p>This content can be hidden or shown.</p>}
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

👉 Initially:

Toggle Visibility
[Hide Button]
This content can be hidden or shown.

👉 After clicking button:

[Show Button]
(Content disappears)

---

🔍 STEP-BY-STEP EXPLANATION

• useState(true) → initial state is visible
• setShow(!show) → toggles value
• {show && ...} → conditional rendering
• Button text changes dynamically

---

⚡ ALTERNATIVE METHOD (Using if-else)

{show ? <p>Visible Content</p> : null}

---

🎯 KEY CONCEPT: CONDITIONAL RENDERING

React allows you to display elements based on conditions:

• && operator → simple conditions
• ? : → if-else logic

---

🌟 ADVANTAGES

• Simple UI control
• Efficient rendering
• Improves user experience
• Used in almost every React app

---

📚 REAL-WORLD USE CASE

• Show/hide password fields
• Toggle menus and sidebars
• Display modals/popups
• Expand/collapse sections

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is useState used for?

👉 To manage state in functional components.

---

Q2. What is conditional rendering?

👉 Displaying UI based on conditions.

---

Q3. What does && operator do in React?

👉 Renders content only if condition is true.

---

Q4. What is boolean state?

👉 A state with true/false values.

---

Q5. Can we toggle UI without useState?

👉 No, state is required for dynamic updates.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Counter App – Program 6
👉 React List Rendering – Program 7
👉 React Hello World – Program 5

---

📌 CONCLUSION

Toggle functionality is a fundamental concept in React. It helps in building interactive and dynamic user interfaces.

👉 Practice this concept — it is widely used in real-world applications.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites