P4.4: Managing State with useState

State is reactive memory that belongs to a component. When state changes, React re-renders the component to show the updated UI.

1. Using useState Hook

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

🎓 Practice Assignment Tasks

Build a toggle component that changes a button's label from 'ON' to 'OFF' when clicked.

Stuck? Hints available

<!-- Write your HTML structure here to complete the assignment -->

🔒 Code requirements not met yet. Complete the tasks above.

🔒 Complete the Practice Assignment above to unlock completion.

PreviousP4.3: Passing Props & Destructuring Next P4.5: React Hooks & useEffect

Home

Course

Playground