Does not work for imported anonymous stateless functional components

[imbhargav5]

https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

For components created using pure functions, the response is 'function(props) ....'.

[vvo]

Hi @bhargav175 do you think you can add a failing test case and submit a PR? Would be AWE-SOME

[imbhargav5]

Sure, will give it a shot.

On Tue, 8 Dec 2015 at 16:31 Vincent Voyer notifications@github.com wrote:

Hi @bhargav175 https://github.com/bhargav175 do you think you can add a
failing test case and submit a PR? Would be AWE-SOME

—
Reply to this email directly or view it on GitHub
#11 (comment)
.

[imbhargav5]

Doesn't work

 export default function(props){...}

Works

 export default function Flexbox(props){ ... } 

[vvo]

I think there's no way to do what you want: the anonymous function has no function.name so we cannot render it to a string since we do not know the function name.

if you console.log(<AnonymousStatelessComponent/>) you will see that JSX did not find any name for the component so we cannot stringify it.

Is that clear? Do you have another idea?

[vvo]

I have reworked the PR, see the master

[vvo]

What we could do here is turn any anonymous component to render into a string like and then compare them. The comparison will work if you compare anonymous component.

What do you think?

[imbhargav5]

Will it work? Like you said, I dont see any property of that we could use to figure out the name.

[vvo]

Also @bhargav175 I would advise you to always use named components because when you use react-dev-tool you will have the same issue as this module.

I will update it to make it work because it's an easy fix but please use named components

[vvo]

Will it work?

Yes

[imbhargav5]

Sure. Thanks @vvo .