React Change Background Color using useState Hook (Button Click Example)

📌 INTRODUCTION

In React, we often need to update the UI dynamically based on user interaction. One common example is changing the background color of a component.

In this program, we will:

• Use the useState hook
• Change background color on button click
• Understand dynamic styling in React

👉 This concept is widely used in themes, UI customization, dashboards, and interactive apps.

---

📘 PROBLEM STATEMENT

👉 Implement a program to change the background color of a component on button click using state in React.

---

💡 CONCEPTS USED

• useState Hook
• Inline Styling in React
• Event Handling
• Dynamic UI

---

🧠 LOGIC EXPLANATION

1. Create a state variable for color
2. Set initial color
3. Change color using button click
4. Apply color using inline styles

---

💻 PROGRAM CODE

Open src/App.js:

import { useState } from "react";

function App() {
  const [color, setColor] = useState("white");

  return (
    <div style={{ backgroundColor: color, height: "100vh", textAlign: "center", paddingTop: "50px" }}>
      <h1>Background Color Changer</h1>

      <button onClick={() => setColor("lightblue")}>
        Blue
      </button>

      <button onClick={() => setColor("lightgreen")}>
        Green
      </button>

      <button onClick={() => setColor("lightcoral")}>
        Red
      </button>
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

👉 Initially:

White background with buttons

👉 After clicking buttons:

Blue / Green / Red background changes dynamically

---

🔍 STEP-BY-STEP EXPLANATION

• useState("white") → sets default background
• setColor("lightblue") → updates state
• style={{ backgroundColor: color }} → applies dynamic styling
• UI updates automatically

---

⚡ ADVANCED VERSION

Random Color Generator

import { useState } from "react";

function App() {
  const [color, setColor] = useState("white");

  const changeColor = () => {
    const colors = ["red", "blue", "green", "yellow", "pink"];
    const random = colors[Math.floor(Math.random() * colors.length)];
    setColor(random);
  };

  return (
    <div style={{ backgroundColor: color, height: "100vh", textAlign: "center" }}>
      <h1>Random Color Generator</h1>
      <button onClick={changeColor}>Change Color</button>
    </div>
  );
}

export default App;

---

🎯 KEY CONCEPT: INLINE STYLING

In React:

style={{ backgroundColor: "red" }}

👉 Uses:

• Double curly braces {{}}
• CamelCase (backgroundColor)

---

🌟 ADVANTAGES

• Easy UI customization
• Dynamic styling
• Improves user experience
• Widely used in modern apps

---

📚 REAL-WORLD USE CASE

• Dark/Light mode toggle
• Theme customization
• Dashboard color changes
• Interactive UI design

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. How do you change styles in React?

👉 Using inline styles or CSS classes.

---

Q2. What is useState used for?

👉 Managing state in functional components.

---

Q3. Why is camelCase used in React styles?

👉 Because JSX follows JavaScript object syntax.

---

Q4. Can we use external CSS instead?

👉 Yes, both inline and external CSS can be used.

---

Q5. What happens when state changes?

👉 Component re-renders automatically.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Toggle Visibility – Program 8
👉 React Counter App – Program 6
👉 React List Rendering – Program 7

---

📌 CONCLUSION

Changing background color using state is a simple yet powerful way to understand dynamic UI in React.

👉 Practice this concept to build interactive and visually appealing 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