Maybe monad in React

index.jsx

// this will fail on if there's no data
React.createClass({
  render() {
    
    return <div>renderComplexWidget(this.props.data)</div>;
  }
});

// this will not; if no data — return null
React.createClass({
  render() {
    
    return <div>{Maybe(this.props.data).maybe(null, renderComplexWidget)}</div>;
  }
});

// ugly
React.createClass({
  render() {
    
    return <div>{this.props.data ? renderComplexWidget(this.props.data) : null}</div>;
  }
});

// even worse
React.createClass({
  render() {
    
    const data = this.props.data;
    
    return <div>{typeof data === 'object' && data !== null ? renderComplexWidget(data) : null}</div>;
  }
});

// above could be
React.createClass({
  render() {
    
    return <div>{MaybeObject(this.props.data).maybe(null, renderComplexWidget)}</div>;
  }
});