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 Router 4 Basics Going Further with Routing Passing Data to Components Via Routes

Joseph Butterfield
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Joseph Butterfield
Full Stack JavaScript Techdegree Graduate 16,430 Points

Help with Chrome's React Dev Tool's UI. Version 4

I wish it were convenient to attach screenshots, but I am finding it hard to follow along with these videos sometimes because the new version of Chrome's React DevTools has a terrible interface.

The new version hides inline props making items difficult to find in the tree. Then once you find it, after a file save and re-render, I have to look for that component again because it doesn't save the location in DevTools of the item I am looking at.

I see how minimizing the information could be helpful, but in our small applications (and I imagine scaling to larger applications), removing props makes it difficult to find anything you are hoping to find because it removes the context associated with the tree. It all becomes "Route -> Consumer -> Provider -> Courses -> div -> div -> and multiple Routes ->" and I have to click to see if that is the component I am looking for.

I find myself constantly digging through the tree.

Is there another way to see more of the Component tree without clicking through each item? Sometimes as I am looking through the tree, I am not quite sure what I am looking through, therefore searching becomes a headache because I'd have to reference the exact component and then type it into the search, then I have to click on each sibling, or parent to find a state or props comparable to the one I am observing.

I can't see how this is helpful, but obviously, this is my first time working with React in Unit 7, so maybe I am just missing something? I understand making the panel less busy, but comparing the instructor video and my browser, I literally cannot find what I am looking for unless I search for it, then I have to think about how to find it.

Seeing the inline props is immensely helpful to me, so I am also curious if there are any significant drawbacks to just rolling back to v3..?

Tyler McDonald
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tyler McDonald
Full Stack JavaScript Techdegree Graduate 16,700 Points

Not sure if this is exactly what you're asking about, but there is a setting you can change in the ⚛️ Components tab. Click on the settings cog, then nav to <> Components and select "Expand component tree by default"

Hope this helps, although its a couple years later so maybe this will help someone else 🤷‍♂️