CODEWITHSUNDEEP
google-chromereactjsgoogle-chrome-devtools
Ville Miekk-oja
Ville Miekk-oja

Reputation: 20925

React: Chrome react tool labels components as stateless components

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.

Upvotes: 1

Views: 412

Answers (2)

Arunoda Susiripala
Arunoda Susiripala

Reputation: 2536

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>);
}

Upvotes: 0

Ville Miekk-oja
Ville Miekk-oja

Reputation: 20925

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

Upvotes: 2

Related Questions