Props, State and Events

Props: Data Flowing Down

function BookCard({ title, price, free }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{free ? "Free PDF" : `Rs.${price}`}</p>
    </div>
  )
}

Props are read-only inputs. Never mutate them - lift changes up via callbacks.

State with useState

const [query, setQuery] = useState("")
const [count, setCount] = useState(0)
// update based on previous value:
setCount(c => c + 1)

Events

<input value={query} onChange={e => setQuery(e.target.value)} />
<button onClick={() => setCount(c => c + 1)}>+1</button>

Controlled Inputs Pattern

Input value always mirrors state (value + onChange). One source of truth kills entire bug categories in forms.

Key Points

• Props down, events up - the core React data flow.
• useState for anything the UI must react to.
• Functional updates (c => c + 1) inside rapid events.