React: Chrome react tool labels components as stateless components

Question

I installed chrome react developers tool, which I have been using for some days now. It's very handy one can see the React components name's through the chrome react tool. I have been wondering why for some of my components, the chrome developer tool transforms the name of the components as 'StatelessComponent'. It would be nice to have the real component's name there, instead of 'StatelessComponent'.

I wonder why it shows it like that? I did read something about using stateless components in react is a good practice, but I'm not sure if that is wanted in my case. Can anyone explain why does chrome react tools transform the name to StatelessComponents? There must be an important reason for it.

Ville Miekk-oja · Accepted Answer · 2015-10-22 09:45:30Z

2

Found a solution:

Chrome react dev tools labels them as stateless components if you have not set the displayName like this:

Component.displayName = "ComponentName"

You have to set the displayName like this if you are creating your react components with this style:

ReactComponent = (props) ->

answered Oct 22, 2015 at 9:45

Ville Miekk-oja

21.4k34 gold badges79 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arunoda Susiripala · Accepted Answer · 2015-12-30 17:01:49Z

0

Here you've two options:

Option 1

const Button = ({name}) => (<button>{name}</button>);
Button.displayName = 'Button';

Option 2

function Button({name}) {
  return (<button>{name}<button>);
}

edited Dec 30, 2015 at 17:01

answered Dec 30, 2015 at 16:50

Arunoda Susiripala

2,5221 gold badge25 silver badges31 bronze badges

Collectives™ on Stack Overflow

React: Chrome react tool labels components as stateless components

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related