React Debugging Challenge #1 - Deconstructed!

Solution to the React Debugging Challenge #1

What did we learn (or re-learn) via this debugging journey?

1. In React, function references are passed as the event handler compared to vanilla JS where we pass a string that calls the function - https://drive.google.com/file/d/1B9hD-FNV8UhxPmVs-GQjFCTs1GkX5hqN/view?usp=sharing

(There's another way to pass function as event handler as anonymous functions with arrow function syntax - check out the "Handling events" reference below)

2. State updates cause a React component to re-render

--------------------------------------------------------------------------

What does Debugging involve?

1. Checking for hints in the error message and stack trace

2. Narrowing down part of the code causing the error or a bug by commenting out lines or via log statements

3. Googling for the error message or the syntax to be verified

--------------------------------------------------------------------------

Related references

1. React: Handling Events - https://reactjs.org/docs/handling-events.html
2. React: Managing State - https://reactjs.org/docs/state-and-lifecycle.htm #using-state-correctly

--------------------------------------------------------------------------

Would like to try debugging the error yourself? Here's the buggy code - https://codesandbox.io/s/react-debugging-challenge-1-j2k83?file=/src/App.js

Was it an easy one for you? There’s a hidden challenge for you - The application works after debugging the error. But, it uses a non-recommended approach. Can you figure that out?

Do share your findings in the comments :)

Original post - https://www.linkedin.com/posts/nabhanabdullapv_debug2levelup-javascript-reactjs-activity-6872889860005392384-NAfa

Don't want to miss the upcoming challenges? Opt-in here - https://itoop5jbx35.typeform.com/to/ciz37bl6

--------------------------------------------------------------------------

Timelines
0:00 - Understanding the error
2:00 - Validating hypotheses
2:20 - Finding the cause
4:30 - Deconstructing the error
7:10 - Reflecting on the debugging process
8:20 - The hidden challenge!