Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Basics (2018) 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,538 Points
Posted by Jesse Dispoto
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Dispoto
Front End Web Development Techdegree Graduate 14,538 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,824 Points
Waylan Sands
Waylan Sands
Courses Plus Student 5,824 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

Erika Reiman
Erika Reiman
4,529 Points
Erika Reiman
Erika Reiman
4,529 Points

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...

Chris DiPiero
Chris DiPiero
12,266 Points

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,658 Points
Dylan Thunn
Dylan Thunn
22,658 Points

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