0Pricing
React Academy · Lesson

Inspecting Component Trees & Props

Drill into component hierarchies and read live prop and state values.

Inspecting Component Trees & Props is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will learn to drill into nested component hierarchies in React DevTools and read complex prop and state values from the Components panel sidebar.

The Component Tree Is a Mirror

Every component you see in DevTools mirrors your JSX nesting. The root is usually your App component. Children are indented beneath their parents, exactly as they appear in source code.

Selecting a Component

Click any component name in the tree. The right panel immediately shows its **props**, **hooks** (state, effects, refs), and the **source** file and line number where it was defined.

Reading String & Number Props

String props appear in quotes: `"hello"`. Numbers appear without quotes: `42`. Booleans show `true` or `false`. You can hover over a value to see its full content if it is truncated.

Expanding Object & Array Props

When a prop value is an object or array, DevTools shows a collapsible tree. Click the arrow next to `{…}` or `[…]` to expand it and see every nested key and value.

Inspecting Function Props

Function props (like `onClick` handlers) appear as `f onClick()`. You can click the small arrow icon next to them to jump to the function definition in the Sources panel.

Filtering the Tree

Use the search box at the top of the Components panel to filter by name. Type `Button` to show only components whose name contains *Button*. This is handy in apps with hundreds of components.

Jumping from DOM to React

In the **Elements** tab, right-click a DOM node and choose **Inspect React component** (available with DevTools installed). DevTools switches to the Components tab and selects the React component that rendered that node.

Editing Props in DevTools

Double-click a prop value in DevTools to edit it live. The component re-renders instantly with the new value. This is useful for testing edge cases without changing source code.

Copying Props as JSON

Right-click any prop or state value in DevTools and choose **Copy value**. This copies the value as JSON to your clipboard, handy for pasting into tests or documentation.

Quick Check

How do you expand an object or array prop in the React DevTools Components panel?

Recap

You can now navigate component trees, read strings/numbers/objects/functions, filter by name, jump from DOM elements to React components, and edit props live in DevTools.

Up Next

Next lesson: **Using the Profiler Tab** — you will record renders, read flame graphs, and pinpoint the components responsible for slow interactions.

Frequently asked questions

Is the “Inspecting Component Trees & Props” lesson free?

Yes — the full text of “Inspecting Component Trees & Props” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Inspecting Component Trees & Props”?

Drill into component hierarchies and read live prop and state values. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Inspecting Component Trees & Props” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Installing & Opening React DevTools
  2. Inspecting Component Trees & Props
  3. Using the Profiler Tab
  4. Debugging Common React Errors
← Back to React Academy