Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Basics Introducing Props Setting and Using Props

Jesse Dispoto
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Dispoto
Front End Web Development Techdegree Graduate 14,537 Points

Can't see props with new React Dev tools update?

props is just blank in the react dev tools console. Is this how it's suppose to be?

Waylan Sands
Waylan Sands
Courses Plus Student 5,823 Points

I downloaded the most recent one. It is different. I have a "Components" button that sits on the menu bar. When I select that and then a component with props they appear on the right-hand side.

Are you selecting a component which you have added props?

3 Answers

If you inspect the element and click on "Properties" in the right-hand pane (next to "Styles" and "Computed") DevTools shows the object containing the element's properties. But it's a bit confusing because it's really different from the setup Guil is demonstrating in this video...

I'm a bit late to the party here, but if you click on the settings button you can expand the data shown. On Firefox (when the components tab is selected in Developer Tools) it's the gear icon just below the Dev Tools bar.

  1. Open developer tools
  2. Click on the "Components" tab
  3. Click on the "View Settings" icon
  4. Turn off the "Hide components where..." switch

Before:

props
     new prop : ""

After:

props
     children: [<Header />, <Player />]
     className: "scoreboard"

Hope that helps!

Dylan Thunn
Dylan Thunn
22,657 Points

As said by Waylan, its now under components in Dev tools since the update sorta recently.