React: It would be nice if a React.Component could render undefined

[CodisRedding]

just an idea

It would be nice if a React.Component could render undefined if some, opted in, property like; isLoading is true.

I find myself doing the following quite a bit:

{this.state.something.isLoading ? <MyComponent/> : undefined}

something like the follow might clean this up a bit

<MyComponent isLoading={this.state.something.isLoading}/>

I'm unaware of how to do this if it's possible already.

[zpao]

return null instead and that will work.

[CodisRedding]

didn't realize that was an option. wonderful. thanks as always

[zpao]

I thought we talked about it more, but I guess not, maybe just release notes and briefly in the docs. http://facebook.github.io/react/docs/component-specs.html#render

null and false both work (to support the return condition && <Component/> pattern).

[asagalSP]

@zpao Is there a reason why undefined doesn't work for this purpose? I figured it would be nice to have that, since you wouldn't have to return anything at all (undefined implied):

function WarningBanner(props) {
  if (props.warn) {
    return (
      <div className="warning">
        Warning!
      </div>
    )
  }
}

Would save 1 line of code! :)

[asfernandes]

Why not allow to return undefined? What's the best way to write a render returning this.props.optionalProperty && <...>?

[gaearon]

We might allow returning undefined in the future.

What's the best way to write a render returning this.props.optionalProperty && <...>?

Not sure what you’re asking. Can you show a full example you’re having issues with?

[asfernandes]

I did with this. It's not nice.

render()
{
    return (
        (this.props.message || null) && <div className="alert alert-success">{this.props.message}</div>
    );
}

This would be more elegant:

render()
{
    return (
        this.props.message && <div className="alert alert-success">{this.props.message}</div>
    );
}

[grovesNL]

With more codebases moving to TypeScript and Flow, I think returning undefined would be very useful here. I try to avoid using null anymore, except when libraries force its usage.

[weizhongtan]

This is the workaround I use:

render() {
  return (
    !!this.props.message && (
      <div className="alert alert-success">{this.props.message}</div>
    )
  );
}

[rahulcyadav]

!render()

what is !render(){}

[weizhongtan]

!render()

what is !render(){}

Sorry, I think that was a typo, it's just the render function. I've fixed the comment now.