This profile component has a "Show Details" toggle. When details are shown, additional info is displayed. But toggling it crashes the entire app with a hooks error.
Symptoms
- Initial render works fine
- Clicking "Show Details" crashes the app
- Error: "Rendered more hooks than during the previous render"
Your Task
Fix the code so that:
- Toggling "Show Details" works without crashing
- When checked, shows the detail fields
- When unchecked, hides them
- All hooks must follow the Rules of Hooks
Think about it: What is the #1 rule of React Hooks?