React Product Card Component using Props and Styling

📌 INTRODUCTION

In modern web applications, displaying products in a card format is very common (e-commerce, dashboards, portfolios).

In this program, we will:

• Create a reusable Product Card Component
• Use props to pass product data
• Apply styling for better UI

👉 This is a real-world React component and very useful for projects.

---

📘 PROBLEM STATEMENT

👉 Develop a React component to display a product card, accepting props like productName, price, and imageUrl.

---

💡 CONCEPTS USED

• React Props
• Functional Components
• Inline Styling / CSS
• Component Reusability

---

🧠 LOGIC EXPLANATION

1. Create a ProductCard component
2. Pass product data via props
3. Display image, name, and price
4. Apply styling for card layout

---

💻 PROGRAM CODE

---

Step 1: Create ProductCard Component

function ProductCard({ productName, price, imageUrl }) {
  return (
    <div style={styles.card}>
      <img src={imageUrl} alt={productName} style={styles.image} />
      <h2>{productName}</h2>
      <p>Price: ₹{price}</p>
      <button style={styles.button}>Buy Now</button>
    </div>
  );
}

const styles = {
  card: {
    border: "1px solid #ddd",
    borderRadius: "10px",
    padding: "15px",
    width: "200px",
    textAlign: "center",
    boxShadow: "0 4px 8px rgba(0,0,0,0.1)",
    margin: "10px"
  },
  image: {
    width: "100%",
    height: "150px",
    objectFit: "cover"
  },
  button: {
    backgroundColor: "#007bff",
    color: "white",
    border: "none",
    padding: "8px 12px",
    borderRadius: "5px",
    cursor: "pointer"
  }
};

export default ProductCard;

---

Step 2: Use in App.js

import ProductCard from "./ProductCard";

function App() {
  return (
    <div style={{ display: "flex" }}>
      <ProductCard
        productName="Smartphone"
        price="15000"
        imageUrl="https://via.placeholder.com/150"
      />

      <ProductCard
        productName="Headphones"
        price="2000"
        imageUrl="https://via.placeholder.com/150"
      />
    </div>
  );
}

export default App;

---

🖥️ OUTPUT

👉 You will see:

[Product Card 1]   [Product Card 2]

Smartphone         Headphones
₹15000             ₹2000
[Buy Now]          [Buy Now]

---

🔍 STEP-BY-STEP EXPLANATION

• Props (productName, price, imageUrl) → pass product data
• <img /> → displays product image
• Inline styles → design card layout
• Component reused multiple times

---

⚡ ADVANCED VERSION (USING CSS FILE)

styles.css

.card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  width: 200px;
  text-align: center;
}

---

🎯 WHY THIS COMPONENT IS IMPORTANT

• Used in e-commerce websites
• Demonstrates props + UI design
• Reusable and scalable
• Helps build portfolio projects

---

🌟 IMPROVEMENTS YOU CAN ADD

• Add rating ⭐
• Add discount %
• Add “Add to Cart” functionality
• Fetch products from API

---

📚 REAL-WORLD USE CASE

• Amazon / Flipkart product cards
• Dashboard widgets
• Portfolio projects
• Shopping apps

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What are props in React?

👉 Props are used to pass data to components.

---

Q2. Why use reusable components?

👉 To avoid code duplication and improve scalability.

---

Q3. What is inline styling in React?

👉 Styling using JavaScript objects.

---

Q4. Can we style using CSS files?

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

---

Q5. What is component reusability?

👉 Using the same component multiple times with different data.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Props – Program 10
👉 React Counter App – Program 6
👉 React List Rendering – Program 7

---

📌 CONCLUSION

The Product Card component is a foundational building block for real-world React applications.

👉 Master this to start building full-scale projects like e-commerce apps.

---

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