Doesn't detect stateless functional components that return ternary expressions

Given a component defined like this:

import React from 'react';

export default function Button(props) {
  const button = <input type="button" />;
  return props.next ? <div id="next">{button}</div> : button;
}

Button.propTypes = {
  next: React.PropTypes.bool,
};

I get this error: Error: No suitable component definition found.

A workaround for this is not to use a ternary:

import React from 'react';

export default function Button(props) {
  const button = <input type="button" />;
  if (props.next) {
    return <div id="next">{button}</div>;
  }
  return button;
}

Button.propTypes = {
  next: React.PropTypes.bool,
};

This gives me the correct output:

{
  "description": "",
  "methods": [],
  "props": {
    "next": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    }
  }
}

Supporting ternary statements would be nice since I have a lot of them in my codebase.

[mike-robertson]

Does this issue still need a fix? I still see issues if I do a ternary or bool && <div />.

[caseycallow]

@bregenspan Looks like it’s fixed on our end, thanks!