React JSX: use function as component issue


I have following code:

foobar = () => {
 return (
  <Link to='/'>Test</Link>

and I would like to use this in render not like this:

`{ this.foobar() }`

but as component like style:

` <this.foobar />`.

It's valid syntax but Phpstorm (Webstorm probably too) tagged this foobar function as unused and you can't jump like in functions (click with cmd).

This is bug or this can be configured somehow?

PS I tagged this as Webstorm topic because it's more like frontend issue.


Why do you refer to your functional component with `this.`? Please provide a full code snippet


Because it's better to read as component. In this function I have only conditional return so it's like dumb component. Full code snippet:

As you can see there is two calls with same result. Unfortunately Phpstorm marked this fooBar function (line 5) as unused property if there is only the second way of calling (<this.fooBar />).


You're right - it's fixed in EAP 2018.2 so I'll wait for stable release. It's not a problem for now. Thanks! :)


Please sign in to leave a comment.