Problems with stateless functional components that return null

[robcaldecott]

I'm using v5 with create-react-app 0.9.5 which does not like one of my stateless functional components that returns null using a ternary based on a prop setting (a pattern that is common with material-ui components.)

Warning: src\MyComponent.js matches a pattern defined in ”components” or “sections” options in your style guide config but doesn’t export a component.

An example component looks something like this:

import React, { PropTypes } from "react";

const MyComponent = props => {
  return props.isVisible ? <p>Test</p> : null;
};

MyComponent.propTypes = {
  isVisible: PropTypes.bool
};

MyComponent.defaultProps = {
  isVisible: true
};

export default MyComponent;

If I change the code to look like this then it works and includes my component:

const MyComponent = props => {
  if (props.isVisible) {
    return <p>Test</p>;
  }
  return null;
};

Not a big deal but a little odd all the same. :)

[sapegin]

Looks like react-docgen doesn’t support it. It’s hard to detect all possible ways of defining stateless components without false positives (which would be worse — in your case you could just rewrite the component).