Component with forwardRef passed as prop

const A = () => <div />
const B = React.forwardRef(() => <div />)

What I get:

<Comp
  a={A}
  b={{
    $$typeof: Symbol(react.forward_ref),
    render: _c3
  }}
/>

What I expect:

<Comp
  a={A}
  b={B}
/>

Repro: https://codesandbox.io/s/dank-cdn-ftvik?file=/src/App.js

[Andarist]

OTOH - this really could be handled in the same way for any prop. People probably rarely want to see the react element’s internal structure in their stringified trees

[as-zlynn-philipps]

OTOH - this really could be handled in the same way for any prop. People probably rarely want to see the react element’s internal structure in their stringified trees

Agreed. function noRefCheck() {} isn’t useful either. Nor is () => {} when it should be the element type (Comp).

Here, I’d expect onClick to be () => {} but maybe that’s a Storybook actions issue.

---

EDIT: Okay, so I figured out how to configure the options for this package in Storybook via global parameters.jsx.

export const parameters = {
  jsx: {
    showFunctions: true,
    // ...
  }
}

I can set showFunctions to true there, but then I run into the problem that this issue #613 is really about. Instead of the component name, it’s gobbledegook. And, since in my case, the function name is a bit different from the exported module name, that adds a layer of complexity. In my case, I might be able to leverage functionValue to achieve the desired result.

The reason onClick was showing function noRefCheck() {} is because my story uses Controls, so I’m setting the icon prop dynamically in the UI. Since sortProps is true by default, it looks like the fallback value for icon was being assigned to onClick I think? Maybe? Due to this bit in the README?

options.sortProps: boolean, default true Either to sort or not props. If you use this lib to make some isomorphic rendering you should set it to false, otherwise this would lead to react invalid checksums as the prop order is part of react isomorphic checksum algorithm.

Either way, explicitly setting sortProps to false yields a more expected result:

Just reporting my findings. ✌️

---

EDIT 2:

With the following config:

BasicUsage.parameters = {
  jsx: {
    filterProps: ['onClick'],
    functionValue: (fn: any) => fn.name.replace('Svg', ''),
    showFunctions: true,
  },
}

Voila:

Although, it’s kinda jank because that functionValue would apply to any function prop. It would be neat if the prop name were passed as well, that way you could modify functionValue conditionally based on the component prop. Even better, a propValue function that takes in the prop key/value and allows you to customize the output. Related: #278, #530, #682