📦 Props & State

Passing props, PropTypes validation, useState hook, and lifting state up.

Props vs State

Props are read-only properties passed down from parent to child components. State is private, mutable data managed internally by a component.

Feature	Props	State
Source	Passed from Parent component	Declared inside Component
Mutability	Immutable (Read-Only)	Mutable via setState / hook
Ownership	Owned by Parent	Owned by Component

Managing State with useState

The `useState` hook adds local component state.

Counter.jsx JSX

import { useState } from 'react';

export function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div class="counter">
      <p>Current Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>Increment</button>
    </div>
  );
}

Lifting State Up

When multiple components need to share dynamic data, lift state up to their closest common parent component.

ParentContainer.jsx JSX

export function ParentContainer() {
  const [query, setQuery] = useState('');

  return (
    <div>
      <SearchInput query={query} onQueryChange={setQuery} />
      <SearchResults query={query} />
    </div>
  );
}

JSX & Components

Events & Lists