React: React.Child.isNull - Ability to check if a component rendered null.

[iammerrick]

Suppose I want a component Concatenate that concatenates it's children together using a separator prop...

import React from 'react';
import _ from 'lodash';

class Concatenate extends React.Component {

  render() {
    var children = React.Children.toArray(this.props.children);
    var separated = children.reduce((previous, current, index) => {
      previous.push(current);
      if (index !== children.length - 1) {
        previous.push(this.props.separator(index));
      }
      return previous;
    }, []);

    return <div {...this.props}>{separated}</div>;
  }
}

Concatenate.defaultProps = {
  separator: (key) => {
    return <span key={key}> &sdot; </span>;
  }
};

export default Concatenate;

I would like to choose to not render a separator if the corresponding child decides to render null, is this possible? Is there a React.Child.isNull functionality?

[zpao]

No and unfortunately this won't be possible - proptypes are done early on the elements and don't have access to the rendered result.

[iammerrick]

No worries. Appreciate the courteous reply! Thanks for React!

[richard-flosi]

This is exactly the same thing I'm trying to do. Still no solution?

[joshacheson]

For what it's worth to anyone who reads this, it's my understanding that React Call Return could be used to solve this problem, though it's not production ready yet.

[damassi]

(The experimental React Call Return API has been removed)