11. Building Custom React Hooks

Activity 11.1: Build a Custom Keyboard Input Hook

Solution:

Perform the following solution steps to complete this activity:

1. As a first step, create a hooks/use-key-event.js file. This file will hold the custom Hook function.
2. Create the useKeyEvent Hook function in the newly added use-key-event.js file. Also, export the useKeyEvent function so that it can be used in other files (it will be used in the App component later):

   function useKeyEvent() {
     // logic to be added...
   }
   export default useKeyEvent;

3. Move the useEffect() import and call (and all the logic inside of it) from the App component body to the useKeyEvent function body:

   import { useEffect } from 'react';
   function useKeyEvent() {
     useEffect(() => {
       function keyPressedHandler(event) {
         const pressedKey = event.key;
         if (!['s', 'c&apos...