Overview

This repository includes boilerplate that should be used when completing these two React challenges:

• useToggle
• useClickOutside

We recommend trying to do these activities without Copilot or similar and without peeking at others' solutions. The whole point of this exercise is to work your memory, not ChatGPT's. After all, you still need to be able to analyze an AI's output to determine whether or not it is good or reasonable.

Instrtuctions

When we're all together, this will be the process

1. Copy and paste the starter code boilerplate in the corresponding file into the task on the links above
2. Developer your code until the project behaves as required without error
3. Submit your solution
4. View your solution and copy and past the URL in the group chat so we can all review it

In each of the starter code boilerplates we specify where you need to make changes with the comment "your code here" or "update me!" This is intentional. We don't want you wasting time on non-React specific tasks (such as laying out a lightbulb).

For useToggle, there are actually two boilerplate files. The first, useToggle-Boilerplate.ts, is the one you should use. The second, useToggle-Boilerplate-2.ts has some additional "funny" code. You are free to use it too but only if you finish the first one early.

useToggle Example

This is what the useToggle code should produce:

Lightbulb.webm