React Props and State Data Flow Hindi – समझे आसान भाषा में 2026

// RULE 1: Props are READ-ONLY – modify nahi kar sakte
function ChildComponent(props) {
  // props.name = "New Name"; // ❌ ERROR – cannot modify props
  return <h1>{props.name}</h1>;
}

// RULE 2: Props can be any data type
function App() {
  return (
    <UserCard
      name="Rahul"           // string
      age={25}               // number
      isActive={true}        // boolean
      hobbies={["coding", "gaming"]}  // array
      address={{ city: "Mumbai", pincode: 400001 }}  // object
      onLike={() => console.log("Liked!")}  // function
    />
  );
}

// RULE 3: Props ka data parent se child tak jaata hai (one-way)
// App → UserCard → UserInfo → UserAvatar (ek hi direction)

// ❌ Without destructuring – repetitive
function Welcome(props) {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <p>Age: {props.age}</p>
      <p>City: {props.city}</p>
    </div>
  );
}

// ✅ With destructuring – clean
function Welcome({ name, age, city }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>Age: {age}</p>
      <p>City: {city}</p>
    </div>
  );
}

// ✅ Default props – agar value pass nahi ki toh default use hoga
function Greeting({ name = "Guest", greeting = "Namaste" }) {
  return <h1>{greeting}, {name}!</h1>;
}

// Usage:
<Greeting />                    // Output: Namaste, Guest!
<Greeting name="Rahul" />       // Output: Namaste, Rahul!
<Greeting name="Priya" greeting="Hello" /> // Output: Hello, Priya!

// Parent component
function App() {
  return (
    <Card>
      <h2>Card Title</h2>
      <p>This is card content</p>
      <button>Click Me</button>
    </Card>
  );
}

// Child component – props.children se access
function Card({ children }) {
  return (
    <div className="card">
      <div className="card-header">Header</div>
      <div className="card-body">{children}</div>
      <div className="card-footer">Footer</div>
    </div>
  );
}

import { useState } from 'react';

function Counter() {
  // Syntax: const [value, setValue] = useState(initialValue);
  const [count, setCount] = useState(0);     // number state
  const [name, setName] = useState("");       // string state
  const [user, setUser] = useState(null);     // null/object state
  const [items, setItems] = useState([]);     // array state
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

function UserProfile() {
  // 1. Number state
  const [age, setAge] = useState(25);
  
  // 2. String state
  const [name, setName] = useState("Rahul");
  
  // 3. Boolean state
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  // 4. Array state
  const [hobbies, setHobbies] = useState(["coding", "reading"]);
  
  // 5. Object state
  const [user, setUser] = useState({
    id: 1,
    name: "Rahul",
    email: "rahul@example.com"
  });
  
  // 6. Null state (loading/fetching ke liye)
  const [data, setData] = useState(null);
  
  // Add to array
  const addHobby = (newHobby) => {
    setHobbies([...hobbies, newHobby]);
  };
  
  // Update object
  const updateUserName = (newName) => {
    setUser({ ...user, name: newName });
  };
  
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button onClick={() => setAge(age + 1)}>Birthday!</button>
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  
  // ✅ CORRECT – using setter function
  const increment = () => {
    setCount(count + 1);
  };
  
  // ✅ CORRECT – functional update (when new value depends on previous)
  const incrementSafe = () => {
    setCount(prevCount => prevCount + 1);
  };
  
  // ❌ WRONG – directly modifying
  const wrongIncrement = () => {
    count = count + 1; // React won't re-render
  };
  
  // ❌ WRONG – mutating objects/arrays directly
  const wrongUpdate = () => {
    user.name = "New Name"; // No re-render
    setUser(user); // Same object reference – React ignores
  };
  
  // ✅ CORRECT – creating new object/array
  const correctUpdate = () => {
    setUser({ ...user, name: "New Name" });
  };
  
  return <button onClick={increment}>Count: {count}</button>;
}

// App.js (Parent)
function App() {
  const [userName, setUserName] = useState("Rahul"); // State in parent
  
  return (
    <div>
      {/* Props pass kar rahe hain */}
      <Greeting name={userName} />
      <NameChanger onNameChange={setUserName} />
    </div>
  );
}

// Greeting.js (Child) – receives PROPS
function Greeting({ name }) {  // ← PROPS (read-only)
  // ❌ Cannot do: name = "Priya"
  return <h1>Hello, {name}</h1>;
}

// NameChanger.js (Child) – has its own STATE
function NameChanger({ onNameChange }) {
  const [inputValue, setInputValue] = useState(""); // ← STATE (mutable)
  
  return (
    <input 
      value={inputValue}  // controlled by state
      onChange={(e) => setInputValue(e.target.value)} // updating state
      onBlur={() => onNameChange(inputValue)}
    />
  );
}

        App (State: user = "Rahul")
              │
              │ props (name="Rahul")
              ▼
         Header Component
              │
              │ props (userName="Rahul")
              ▼
        UserAvatar Component

// Only App has state
function App() {
  const [user, setUser] = useState({ name: "Rahul", role: "Admin" });
  
  return (
    <div>
      <Header user={user} />        {/* props pass */}
      <Sidebar user={user} />       {/* props pass */}
      <Content user={user} />       {/* props pass */}
    </div>
  );
}

// Header receives props – no state here
function Header({ user }) {
  return (
    <header>
      <h1>Welcome, {user.name}</h1>
      <UserMenu user={user} />      {/* further passing */}
    </header>
  );
}

// UserMenu receives props – no state here either
function UserMenu({ user }) {
  return (
    <div className="menu">
      <span>Role: {user.role}</span>
    </div>
  );
}

// ❌ WRONG – siblings can't share state directly
function SearchBar() {
  const [searchTerm, setSearchTerm] = useState("");
  return <input onChange={(e) => setSearchTerm(e.target.value)} />;
}

function ResultsList() {
  // How to get searchTerm here? Can't!
  return <div>Results...</div>;
}

// ✅ CORRECT – State in parent component
function SearchPage() {
  // State lifted UP to common parent
  const [searchTerm, setSearchTerm] = useState("");
  
  return (
    <div>
      <SearchBar 
        searchTerm={searchTerm}
        onSearchChange={setSearchTerm}
      />
      <ResultsList searchTerm={searchTerm} />
    </div>
  );
}

// Child 1 – receives state and setter as props
function SearchBar({ searchTerm, onSearchChange }) {
  return (
    <input 
      value={searchTerm}
      onChange={(e) => onSearchChange(e.target.value)}
      placeholder="Search..."
    />
  );
}

// Child 2 – receives state as props
function ResultsList({ searchTerm }) {
  const results = filterData(searchTerm);
  return (
    <ul>
      {results.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

function TemperatureConverter() {
  const [celsius, setCelsius] = useState("");
  const [fahrenheit, setFahrenheit] = useState("");
  
  // Convert celsius to fahrenheit
  const handleCelsiusChange = (value) => {
    setCelsius(value);
    if (value === "") {
      setFahrenheit("");
    } else {
      setFahrenheit((parseFloat(value) * 9/5 + 32).toString());
    }
  };
  
  // Convert fahrenheit to celsius
  const handleFahrenheitChange = (value) => {
    setFahrenheit(value);
    if (value === "") {
      setCelsius("");
    } else {
      setCelsius(((parseFloat(value) - 32) * 5/9).toString());
    }
  };
  
  return (
    <div>
      <TemperatureInput 
        scale="Celsius"
        value={celsius}
        onChange={handleCelsiusChange}
      />
      <TemperatureInput 
        scale="Fahrenheit"
        value={fahrenheit}
        onChange={handleFahrenheitChange}
      />
    </div>
  );
}

function TemperatureInput({ scale, value, onChange }) {
  return (
    <fieldset>
      <legend>Enter temperature in {scale}:</legend>
      <input 
        type="number"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      />
    </fieldset>
  );
}

// ❌ Uncontrolled – DOM apna value rakhta hai
function UncontrolledForm() {
  return <input type="text" />;
  // React ko value ka pata nahi – access karne ke liye ref chahiye
}

// ✅ Controlled – React control karta hai value
function ControlledForm() {
  const [value, setValue] = useState("");
  
  return (
    <input 
      type="text"
      value={value}  // React state se control
      onChange={(e) => setValue(e.target.value)}  // Update on change
    />
  );
}

import { useState } from 'react';

function RegistrationForm() {
  const [formData, setFormData] = useState({
    username: "",
    email: "",
    password: "",
    confirmPassword: "",
    age: "",
    gender: "",
    interests: [],
    termsAccepted: false
  });
  
  const [errors, setErrors] = useState({});
  
  // Generic change handler for all inputs
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    
    setFormData(prev => ({
      ...prev,
      [name]: type === "checkbox" ? checked : 
               type === "select-multiple" ? Array.from(e.target.selectedOptions, opt => opt.value) :
               value
    }));
    
    // Clear error for this field when user types
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: "" }));
    }
  };
  
  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Validation
    const newErrors = {};
    if (!formData.username) newErrors.username = "Username is required";
    if (!formData.email.includes("@")) newErrors.email = "Invalid email";
    if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Passwords don't match";
    }
    
    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }
    
    console.log("Form submitted:", formData);
    alert("Registration successful!");
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
        {errors.username && <span style={{color: "red"}}>{errors.username}</span>}
      </div>
      
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <span style={{color: "red"}}>{errors.email}</span>}
      </div>
      
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </div>
      
      <div>
        <label>Gender:</label>
        <select name="gender" value={formData.gender} onChange={handleChange}>
          <option value="">Select</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
          <option value="other">Other</option>
        </select>
      </div>
      
      <div>
        <label>
          <input
            type="checkbox"
            name="termsAccepted"
            checked={formData.termsAccepted}
            onChange={handleChange}
          />
          Accept Terms & Conditions
        </label>
      </div>
      
      <button type="submit">Register</button>
    </form>
  );
}

// ❌ Prop Drilling – User data App → Profile → Details → Avatar
// Avatar needs user, but Profile and Details don't!
function App() {
  const [user, setUser] = useState({ name: "Rahul", avatar: "image.jpg" });
  return <Profile user={user} />;
}

function Profile({ user }) {  // Doesn't need user itself
  return <Details user={user} />;  // Just passing through
}

function Details({ user }) {  // Doesn't need user itself
  return <Avatar user={user} />;  // Just passing through
}

function Avatar({ user }) {  // Actually needs user!
  return <img src={user.avatar} alt={user.name} />;
}

// ✅ Better – pass children instead
function App() {
  const [user, setUser] = useState({ name: "Rahul", avatar: "image.jpg" });
  
  return (
    <Profile>
      <Details>
        <Avatar user={user} />
      </Details>
    </Profile>
  );
}

function Profile({ children }) {
  return <div className="profile">{children}</div>;
}

function Details({ children }) {
  return <div className="details">{children}</div>;
}

function Avatar({ user }) {
  return <img src={user.avatar} alt={user.name} />;
}

// Context API – direct access, no prop drilling
const UserContext = React.createContext();

function App() {
  const [user, setUser] = useState({ name: "Rahul" });
  
  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  return <Details />;  // No props needed!
}

function Details() {
  return <Avatar />;   // No props needed!
}

function Avatar() {
  const user = useContext(UserContext);  // Direct access!
  return <img src={user.avatar} />;
}

import { useState } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState("");
  
  const addTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
      setInputValue("");
    }
  };
  
  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };
  
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  
  return (
    <div>
      <h1>Todo App</h1>
      <div>
        <input 
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="Add a task..."
        />
        <button onClick={addTodo}>Add</button>
      </div>
      
      <TodoList 
        todos={todos}
        onToggle={toggleTodo}
        onDelete={deleteTodo}
      />
      
      <Stats todos={todos} />
    </div>
  );
}

function TodoList({ todos, onToggle, onDelete }) {
  if (todos.length === 0) {
    return <p>No tasks yet. Add one!</p>;
  }
  
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem 
          key={todo.id}
          todo={todo}
          onToggle={onToggle}
          onDelete={onDelete}
        />
      ))}
    </ul>
  );
}

function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
      <input 
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
      />
      <span>{todo.text}</span>
      <button onClick={() => onDelete(todo.id)}>❌</button>
    </li>
  );
}

function Stats({ todos }) {
  const total = todos.length;
  const completed = todos.filter(t => t.completed).length;
  const pending = total - completed;
  
  return (
    <div>
      <p>Total: {total} | Completed: {completed} | Pending: {pending}</p>
    </div>
  );
}

function ShoppingCart() {
  const [cart, setCart] = useState([]);
  
  const products = [
    { id: 1, name: "Laptop", price: 50000 },
    { id: 2, name: "Mouse", price: 500 },
    { id: 3, name: "Keyboard", price: 1500 }
  ];
  
  const addToCart = (product) => {
    setCart(prevCart => {
      const existing = prevCart.find(item => item.id === product.id);
      if (existing) {
        return prevCart.map(item =>
          item.id === product.id 
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prevCart, { ...product, quantity: 1 }];
    });
  };
  
  const removeFromCart = (id) => {
    setCart(prevCart => prevCart.filter(item => item.id !== id));
  };
  
  const updateQuantity = (id, quantity) => {
    if (quantity === 0) {
      removeFromCart(id);
    } else {
      setCart(prevCart =>
        prevCart.map(item =>
          item.id === id ? { ...item, quantity } : item
        )
      );
    }
  };
  
  const getTotalPrice = () => {
    return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
  };
  
  return (
    <div>
      <h1>Shopping Cart</h1>
      
      <ProductList products={products} onAddToCart={addToCart} />
      
      <Cart 
        cart={cart}
        onUpdateQuantity={updateQuantity}
        onRemove={removeFromCart}
      />
      
      <h3>Total: ₹{getTotalPrice()}</h3>
    </div>
  );
}

function ProductList({ products, onAddToCart }) {
  return (
    <div>
      <h2>Products</h2>
      {products.map(product => (
        <div key={product.id}>
          <span>{product.name} - ₹{product.price}</span>
          <button onClick={() => onAddToCart(product)}>Add to Cart</button>
        </div>
      ))}
    </div>
  );
}

function Cart({ cart, onUpdateQuantity, onRemove }) {
  if (cart.length === 0) {
    return <p>Cart is empty</p>;
  }
  
  return (
    <div>
      <h2>Cart</h2>
      {cart.map(item => (
        <div key={item.id}>
          <span>{item.name} - ₹{item.price} x {item.quantity}</span>
          <button onClick={() => onUpdateQuantity(item.id, item.quantity - 1)}>-</button>
          <button onClick={() => onUpdateQuantity(item.id, item.quantity + 1)}>+</button>
          <button onClick={() => onRemove(item.id)}>Remove</button>
        </div>
      ))}
    </div>
  );
}

// ❌ Wrong
const [user, setUser] = useState({ name: "Vivek" });
user.name = "Deepti";  // No re-render
setUser(user);        // Same reference – React ignores

// ✅ Correct
setUser({ ...user, name: "Deepti" });

// ❌ Wrong
setCount(count + 1);
console.log(count);  // Still old value!

// ✅ Correct
setCount(count + 1);
useEffect(() => {
  console.log(count);  // New value after re-render
}, [count]);

// OR use functional update
setCount(prev => {
  const newValue = prev + 1;
  console.log(newValue);  // New value immediately
  return newValue;
});

// ❌ Wrong
function Child({ user }) {
  user.name = "New Name";  // ERROR – props are read-only
  return <h1>{user.name}</h1>;
}

// ✅ Correct – copy and then modify
function Child({ user, onUpdate }) {
  const handleUpdate = () => {
    onUpdate({ ...user, name: "New Name" });
  };
  return <button onClick={handleUpdate}>Update</button>;
}

// ❌ Warning: Each child needs unique key
{todos.map(todo => <li>{todo.text}</li>)}

// ✅ Correct
{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}