React Learning Blog- Mini Project: Bulb On/Off Toggle App using `useState`

Today's Learning
In today’s React session, I practiced how to dynamically change UI based on state using the useState Hook. To make this concept clear, I built a small but interesting mini-project – A Bulb On/Off Toggle App.

Mini Project Explanation

1.Project Name: Bulb On/Off Toggle
2.Main Concepts Used:

• React Functional Component
• useState Hook
• Conditional Rendering
• onClick Event Handling

Key Code Breakdown

import { useState } from "react";

function Bulb() {
  const [bulbOnOff, setBulbOnOff] = useState(true);

  return (
    <div>
      <img 
        src={
          bulbOnOff
            ? "https://toppng.com/uploads/preview/light-bulb-on-off-png-115539402943y50vxr5yi.png"
            : "https://toppng.com/uploads/preview/light-bulb-on-off-png-11553940171g57vp25a8k.png"
        }
      />
      <button onClick={() => setBulbOnOff(!bulbOnOff)}>
        {bulbOnOff ? "On" : "Off"}
      </button>
    </div>
  );
}

export default Bulb;

Topics Covered Today

Topic	Description
useState Hook	To manage the bulb's state (On/Off).
State Initialization	const [bulbOnOff, setBulbOnOff] = useState(true)
Event Handling	Button onClick to toggle bulb state.
Conditional Rendering	Change the bulb image and button text based on state.

What I Learned Today

• How to use the useState Hook to control the component's data.
• How to change an image dynamically using conditional rendering (? : operator).
• Handling user interaction via onClick event.
• How to change button text based on state.

My Thoughts

This small project helped me clearly understand state manipulation and dynamic rendering in React. It made me feel confident in using the useState Hook for real UI changes.

"Every bug is a hidden lesson..."