Skip to content
12 changes: 10 additions & 2 deletions src/formatter/formatPropValue.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { isPlainObject } from 'is-plain-object';
import { isValidElement } from 'react';
import type { Options } from './../options';
import parseReactElement from './../parser/parseReactElement';
import formatComplexDataStructure from './formatComplexDataStructure';
import formatFunction from './formatFunction';
import formatTreeNode from './formatTreeNode';
import type { Options } from './../options';
import parseReactElement from './../parser/parseReactElement';

const escape = (s: string): string => s.replace(/"/g, '"');

Expand Down Expand Up @@ -53,6 +53,14 @@ const formatPropValue = (
)}}`;
}

// handle forwardRef and memo
if (isPlainObject(propValue) && propValue.$$typeof) {
return `{${propValue.displayName ||
propValue.type?.name ||
propValue.render?.name ||
'Component'}}`;
}

if (propValue instanceof Date) {
if (isNaN(propValue.valueOf())) {
return `{new Date(NaN)}`;
Expand Down
28 changes: 28 additions & 0 deletions src/formatter/formatPropValue.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -135,4 +135,32 @@ describe('formatPropValue', () => {

expect(formatPropValue(new Map(), false, 0, {})).toBe('{[object Map]}');
});

it('should format a memoized React component prop value', () => {
const Component = React.memo(function Foo() {
return <div />;
});

expect(formatPropValue(Component, false, 0, {})).toBe('{Foo}');

const Unnamed = React.memo(function() {
return <div />;
});

expect(formatPropValue(Unnamed, false, 0, {})).toBe('{Component}');
});

it('should format a forwarded React component prop value', () => {
const Component = React.forwardRef(function Foo(props, forwardedRef) {
return <div {...props} ref={forwardedRef} />;
});

expect(formatPropValue(Component, false, 0, {})).toBe('{Foo}');

const Unnamed = React.forwardRef(function(props, forwardedRef) {
return <div {...props} ref={forwardedRef} />;
});

expect(formatPropValue(Unnamed, false, 0, {})).toBe('{Component}');
});
});