Conditional Rendering in React JS
What is Conditional Rendering?
Conditional rendering means showing different UI based on conditions.
Example:
User logged in → show Dashboard
User not logged in → show Login page
Types of Conditional Rendering
1. if / else
2. Ternary Operator
3. Logical AND (&&) , OR , etc
Rendering Lists in React JS
What is List Rendering?
List rendering means displaying multiple items using .map().
Real Life Example
E-commerce websites like Amazon show products using lists.
Code Example
function Product() {
const myproducts = [
{ id: 1, name: "Laptop", price: 120000, color: "Silver" },
{ id: 2, name: "iPhone", price: 250000, color: "Black" },
{ id: 3, name: "Android", price: 80000, color: "Blue" }
];
return (
<div>
<h1>Product List</h1>
{[Link]((product) => (
<div key={[Link]} className="productCard">
<h2 className="title">{[Link]}</h2>
<p>Price: {[Link]}</p>
<p>Color: {[Link]}</p>
</div>
))}
</div>
);
}
export default Product;
External CSS ([Link])
/* GLOBAL */
body {
background: linear-gradient(135deg, #eef2f7, #dbeafe);
font-family: "Segoe UI", sans-serif;
margin: 0;
padding: 0;
}
/* PAGE TITLE */
h1 {
text-align: center;
font-size: 34px;
margin: 30px 0;
color: #0f172a;
letter-spacing: 1px;
}
/* CONTAINER */
div {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 10px;
}
/* PRODUCT CARD */
.productCard {
background: #ffffff;
border-radius: 16px;
padding: 18px;
width: 260px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* TOP COLOR BAR (premium look) */
.productCard::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 4px;
width: 100%;
background: linear-gradient(90deg, #3b82f6, #9333ea);
}
/* HOVER EFFECT */
.productCard:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
/* TITLE */
.title {
font-size: 20px;
font-weight: 700;
color: #1d4ed8;
margin-bottom: 10px;
}
/* TEXT */
p{
margin: 6px 0;
color: #475569;
font-size: 14px;
}
/* PRICE HIGHLIGHT (extra styling) */
.productCard p:nth-child(3) {
font-weight: bold;
color: #16a34a;
}
[Link]
import "./[Link]";
import Product from "./Components/Product";
function App(){
return(
<>
<Product/>
</>
)
}
export default App;
Events in React JS
What are Events?
Events are user actions like click, typing, submit, etc.
Click Event Example
function ClickEvent() {
function handleClick() {
alert("Button clicked!");
}
return (
<div>
<h2>Click Event Example</h2>
<button onClick={handleClick}>
Click Me
</button>
</div>
);
}
export default ClickEvent;
Input Event Example
import { useState } from "react";
function InputEvent() {
const [text, setText] = useState("");
function handleChange(e) {
setText([Link]);
}
return (
<div>
<h2>Input Event Example</h2>
<input type="text" onChange={handleChange} />
<p>You typed: {text}</p>
</div>
);
}
export default InputEvent;
Summary
Conditional rendering controls UI based on conditions
List rendering uses .map() to show multiple items
External CSS goes in [Link] and is imported in React
Events handle user interactions like click and input