React: What's the reason that a stateless function cannot return null?

[hnordt]

When I return null from a stateless function I receive an error message. I would like to know what's the reason that a stateless function cannot return null.

Here is my sample code:

const MeetingMembers = ({ members, isLoading, error }) => {
  if (isLoading) {
    return <i className="fa fa-spinner fa-spin" />;
  }
  if (error) {
    return <div className="alert alert-danger">{error}</div>;
  }
  if (!members) {
    return null; // if no members was passed the component should'nt be displayed yet
  }
  return <pre>{JSON.stringify(members, null, 2)}</pre>;
};

Thank you.

[gaearon]

I think this is on the table for 0.15 (https://github.com/facebook/react/issues/4600):

Remove Support for Inheritless Classes - Enables null return values in plain functions

[hnordt]

Awesome. For now I'll return <span />.

Thanks.

[syranide]

@hnordt <noscript /> is what React currently uses when you return null.

[sophiebits]

Yeah, this is currently a limitation because React constructs every class (new MeetingMembers()) and if you return a non-object then you'll get the instance of the class back instead of null. We added the requirement that every class extend from React.Component to solve this issue, but 0.14 only deprecates the old behavior and doesn't change it outright. 0.15 will solve this.

Not sure if we have another tracking issue though so we can use this one.

[andrevinsky]

:+1:

[jimfb]

Fixed in https://github.com/facebook/react/pull/5884