Module 3 – State & Props
_____________________________________
1. What is State?
State is a built-in React object that stores data that can change over time.
When the state changes, React automatically updates the UI.
Simple Definition
> State = Component's own memory.
---
Real-Life Example
Imagine a TV Remote 📺.
Volume = 10
You press +
Volume becomes 11
The volume changes dynamically.
Here, Volume = State.
---
Another Example
Instagram ❤️
Likes = 150
Click Like
Likes = 151
Only the like count changes, not the whole page.
This changing data is managed by State.
---
Why Do We Need State?
Without State:
UI never changes.
Data remains static.
With State:
UI updates automatically.
Better user interaction.
Dynamic applications.
---
Creating State using useState
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</>
);
}
export default Counter;
---
Understanding the Syntax
const [count, setCount] = useState(0);
count → Current value
setCount → Function to update value
0 → Initial value
---
Real-Life Example
Bank Balance
Current Balance = balance
Update Balance = setBalance()
Initial Balance = ₹5000
const [balance, setBalance] = useState(5000);
---
Example – Toggle Button
import { useState } from "react";
function Toggle() {
const [isOn, setIsOn] = useState(false);
return (
<>
<h2>{isOn ? "Light ON" : "Light OFF"}</h2>
<button onClick={() => setIsOn(!isOn)}>
Toggle
</button>
</>
);
}
---
State Rules
✅ State is local to a component.
✅ State updates the UI automatically.
✅ Never modify state directly.
❌ Wrong
count = count + 1;
✔ Correct
setCount(count + 1);
---
2. What are Props?
Props (Properties) are used to pass data from a Parent Component to a Child Component.
Simple Definition
> Props = Data sent from Parent → Child.
---
Real-Life Example
A teacher gives homework to students.
Teacher = Parent
Homework = Props
Student = Child
Students receive the homework but cannot change it directly.
---
Parent Component
import Student from "./Student";
function App() {
return (
<>
<Student name="Swasti" />
</>
);
}
---
Child Component
function Student(props) {
return <h2>Hello {[Link]}</h2>;
}
export default Student;
Output:
Hello Swasti
---
Destructuring Props
Instead of:
function Student(props) {
return <h2>{[Link]}</h2>;
}
Use:
function Student({ name }) {
return <h2>{name}</h2>;
}
This is cleaner and commonly used.
---
Passing Multiple Props
<Student
name="Swasti"
age={22}
course="MCA"
/>
Child Component:
function Student({ name, age, course }) {
return (
<>
<h2>Name : {name}</h2>
<h2>Age : {age}</h2>
<h2>Course : {course}</h2>
</>
);
}
---
Props are Read-Only
❌ Wrong
[Link] = "Rahul";
✔ Correct
Props should never be modified inside the child component.
---
State vs Props
State Props
Managed inside component Passed by parent
Mutable (can change) Read-only
Local Parent controlled
Uses useState() Passed as attributes
Updates component Receives data
---
Data Flow in React
React follows One-Way Data Flow.
Parent
↓
Child
↓
Grandchild
Data always flows downward.
---
Example – Product Card
Parent:
<Product
title="Laptop"
price={65000}
/>
Child:
function Product({ title, price }) {
return (
<>
<h2>{title}</h2>
<h3>₹{price}</h3>
</>
);
}
---
Rendering Lists with Props
const students = [
{ id: 1, name: "Swasti" },
{ id: 2, name: "Rahul" }
];
{[Link](student => (
<Student
key={[Link]}
name={[Link]}
/>
))}
---
Common Mistakes
❌ Changing props directly.
❌ Forgetting to use setState.
❌ Not providing key while rendering lists.
❌ Confusing state with props.
---
Best Practices
Use State for data that changes.
Use Props to pass data.
Keep state as close as possible to where it's needed.
Use descriptive state names (isLoggedIn, userName, cartItems).
---
Practical Task
Create a Counter App:
Increase button
Decrease button
Reset button
Use useState().
---
Assignment
Create a Student Profile Card.
Each card should receive the following through props:
Name
Age
Course
College
Image
Render at least 5 student cards using .map().
---
Interview Questions
1. What is State in React?
2. Why do we use useState()?
3. What is Props?
4. Difference between State and Props?
5. Can a child component modify props? Why?
6. What is One-Way Data Flow?
7. What happens when state changes?
8. Why should state not be modified directly?
9. What is prop destructuring?
10. Why do we use the key prop in lists?
11. Can props contain functions?
12. Can state store objects and arrays?
13. What is the initial state?
14. When should you use State instead of Props?
15. Explain State and Props with a real-life example.
---
Mini Project – Student Management Dashboard
Build a simple dashboard with:
Parent Component: [Link]
Child Component: [Link]
Pass student details through Props
Use State to:
Add a new student
Delete a student
Update a student's course
Count total students
Concepts Covered
Functional Components
useState
Props
Parent–Child Communication
List Rendering with .map()
Event Handling
Dynamic UI Updates