8

This is a screenshot of the new React Dev Tools in Google Chrome:

React Dev Tools

Only the top level component name AdminArea shows. This component is in my script's entry file, index.jsx. There should also be AddNewCoupon and ViewCoupons components. No filters are enabled.

Notice also the state hook naming inside the component only says "State". These are booth useState() hooks.

The useReducer's initial state variable names can be seen, but only because I'm directly exporting and importing that variable into the entry file index.jsx.

Anyone know how to fix these labelling issues?

Sean D
  • 3,810
  • 11
  • 45
  • 90

1 Answers1

2

Actually there's no current solution to this problem I was going to open a Github issue about this but it turned out that Bryan Vaughn opened the issue himself :). Here is the reference to Github issue. Cheers, sigfried.

Update

Now it's possible to show the names within the DevTools, click the magic wand in the top right corner: Click the magic wand button

And that will become: enter image description here

Rubén S. García
  • 678
  • 7
  • 24
  • 1
    The magic wand does not appear in my devtool anymore, but I found another way to display the name using `useDebugValue`. More detail in [this](https://stackoverflow.com/a/69773352/9449426) answer. – NearHuscarl Oct 29 '21 at 18:37
  • 1
    Interesting, at least in FF Developer Edition I still see it. – Rubén S. García Nov 13 '21 at 10:45
  • Three plus years later and this still doesn't work. I see the wand but it doesn't do anything. I'm seriously considering going back to using class components because of this. – kevmull Mar 07 '23 at 16:18