React Beginner Challenges - 25 Debugging Exercises

Master debugging strategy to identify root causes by reproducing bugs. Use console errors and Chrome DevTools to determine if the fault is in your code or an external library.

Learn how the number one mistake beginners make when writing code—skipping spelling checks—can cause compile-time or runtime issues and hinder debugging, including case sensitivity.

Master the WebKit inspector in Chrome DevTools to debug React apps, inspect elements and styles, use the console, and manage breakpoints with source maps.

Explore Chrome DevTools network and performance panels to inspect server responses, timing, and asset loading; profile memory, frames, and call stacks while testing responsive layouts.

Learn to install and use the Chrome extension React Developer Tools to inspect the React tree, view component sources, modify props, and profile component performance in a React app.

Learn to set conditional breakpoints and watch expressions for targeted debugging. Apply them to long list loops, no title flags, and specific values like i equals 40.

Master a complete guide to console logging in JavaScript for debugging React apps, covering log, warn, error, styling, string substitution, and object logging with shallow and deep copies.

Learn to profile JavaScript code with console.time and console.timeEnd, label timed blocks, measure execution in milliseconds, and compare relative performance while noting browser timing is approximate.

Use console.table to map an eight by eight mine grid and visualize bombs and surrounding numbers for easy debugging.

Toggle the device toolbar to simulate mobile screens, switch between iPhone and iPad, adjust zoom and pixel counts, throttle mobile speed, and test responsive breakpoints.

Discover how to use DOM breakpoints to monitor attribute modifications, subtree modifications, and node removals, and compare debugging in vanilla DOM versus React DOM.

Enable pause on uncaught exceptions in the webcam inspector to trigger a break point, hover to inspect the error line, and reveal the stack trace for quicker debugging.

Learn to debug the common is not a function error in React by reading the error and stack trace, and fix a function missing on an object like Griselle.

Debug this challenge by using chrome dev tools and react dev tools to locate the submit handler, inspect the password validation, and reveal the secret password Coconut's.

Learn to debug a crashing React app by diagnosing a syntax error, finding an unclosed div tag, and fixing it using sandbox, console logs, and browser dev tools.

Debug a React app crash by reading the error 'objects are not valid as React child,' tracing it to line six, and rendering a primitive string instead of an object.

Challenge 4 reveals a blank screen caused by returning a function as a react child; fix by returning the component itself, guided by the warning.

debug a React color button by tracing a read-only color error, using useState to manage color, and fix by using setColor to update state, preventing read-only errors.

Debugs a dropdown built with React Select, reproduces the issue in code sandbox, inspects console warnings and props, and fixes state handling to set the selected option.

This challenge guides debugging a button that doesn't work by inspecting render state, initializing useState with an empty array, and updating users via setUsers with the spread operator in React.

Fix a React beginner debugging task by initializing the users array, wiring input onChange to use event.target.value, and spread existing users when adding new ones to build a to-do list.

Diagnose why a child cannot be removed from its parent in a React app. Inspect the remove callback and event handling, and fix with an id-specific arrow function.

Diagnose and fix a syntax error by defining an async helper and calling it inside a useEffect, explain async/await and rules of hooks, and fetch a cat.

Challenge 11 fixes a duplicate input bug by using separate first and last name state and an input name attribute with a shared onChange handler.

Investigate why the GitHub repos cards show no data by inspecting the network tab and React dev tools, then fix missing data like name and language.

Learn to log typed characters in a React challenge by handling a synthetic key press event, extracting the character, and filtering for single-character keys such as enter or backspace.

Learn to measure a React element's height with refs, using clientHeight and getBoundingClientRect to compare inner versus rendered height, and verify updates.

Reproduce the mobile view with the device toggle, inspect styles and media queries, and adjust the width in the media query to auto or 100% for true mobile responsiveness.

Debug and fix a Material-UI radio group by wiring the onChange handler to event.target.value, ensuring the radio group maintains the selected value through form control labels.

Diagnose a redux counter error by ensuring dispatched actions have a defined type, implement increment and decrement actions, and see how dispatch, reducer, and store update the state.

debug a common class-based React issue where setState isn't a function by binding this or using arrow functions in event handlers.

Diagnose a no-code password challenge with Chrome DevTools, tracing the cannot set property zero of undefined error and using conditional breakpoints to identify Pazzi Méndez as the root cause.

Fix the minesweeper numbers by debugging the get value logic in a React grid cell, tracing components to restore correct rendering and show the numbers around mines.

Debug challenge 21 demonstrates unlocking a locked app without writing code by editing local storage in Chrome DevTools. Set the lock key to unlocked and refresh to access it.

Debug a React context theme switch by wiring a setTheme function into the theme context provider and using useContext to access theme values for dark and light themes.

Identify the charts and align their colors with the brand across Apex charts, Highcharts, and Chartist by adjusting options and using global settings guided by documentation.

Showcases date formatting in a React beginner challenge by aligning the chip with the date picker. Use the format function from date functions to format the date for display.

Troubleshoot and fix a material-ui vehicle entry form by correcting validation logic, ensuring required fields behave correctly, clearing the form after submission, and auto focusing the first field.