displayName is set to "o" when minifiying Stateless function components via webpack

Given a component defined as:

export const SubmitButton = ({readyState, defaultText, pendingText}) => (
    <button
        className="btn btn-lg btn-primary btn-block"
        type="submit"
        disabled={readyState === "pending"}>
        {
            readyState === "pending"
                ? (pendingText || defaultText)
                : defaultText
        }
    </button>
);

and minified with webpack’s UglifyJsPlugin, you get components with displayName “o” in the React browser tools.

[silvenon]

Mind blown 😮 Thanks a bunch!

For others who stumble onto this discussion:

import React from 'react';
import Foo from './Foo';

const Bar = (props) => {
  if (props.children.type === Foo) {
    // ...
  }

  return /* ... */;
};

[sophiebits]

@silvenon I wouldn’t recommend it. Why not compare the type to the object exactly?