How do we document methods inside a functional component?

[VigneshSubramaniam]

Let's say I have a component like below:

/**
 *
 * This is geting documented
 */
function MyComponent(props) {
  /**
   *
   * This is not getting documented
   */
  const foo = () => {
    console.log('I am not documented :(');
  };
  return <div>Hello world!</div>;
}

the react-docgen return object does not have any methods and just shows an empty array. Is there a way to document these kind of methods?

[danez]

This is not yet possible. you can try using this resolver: https://github.com/Jmeyering/react-docgen-annotation-resolver

[chenzp1996]

I have the same problem, did you solve it?

[danez]

This works in v6 if you annotated the component with @component:

/**
 * This is geting documented
 */
function MyComponent(props) {
  /**
   *
   * This is not getting documented
   * @component
   */
  const foo = () => {
    console.log('I am not documented :(');
  };
  return <div>Hello world!</div>;
}