Outline
Outline
Exercise: Broken Form
https://stackblitz.com/edit/react-yo58f8
Objectives
1) Show a banner notification when the app is offline.
Needed details:
- "window.navigator.onLine" returns TRUE if you are online and FALSE if you are offline.
- Call handleOfflineStatusChange(status) with "offline" or "online" when you detect a change.
- if you choose to subscribe to an event in an effect, you need to unsubscribe during the cleanup stage.
useEffect(() => {
// effect in here
return () => {
cleanup code here
};
});
Hints:
- test offline/online mode with the network panel in devtools
- window.addEventListener('online', callbackFn);
- window.removeEventListener('online', callbackFn);
- There's an 'online' and 'offline' event.
2) Populate the Category dropdown from "categories" array found in the fetchUser ajax call. Then ensure that the "Support" option is selected by default when the page loads.
Hints:
- Save the "categories" array from the response to state in React
- Use that state to generate the options for the dropdown
3) Fill out the form. Then click "Reset Form". You'd expect all of the fields except for name and category to be blank. That isn't happening. Fix it.
Hints:
- Follow the logic after you click "reset form". Console.log state along the way. See where state goes wrong.
- This may have to do with stale state.