ElementBadges() — react Function Reference

Architecture documentation for the ElementBadges() function in ElementBadges.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ ElementBadges() — react Function Reference

Dependency Diagram

graph TD
  dcddba19_583a_b531_9a4f_941e70dcbf0a["ElementBadges()"]
  25e89372_6558_2e4a_04f5_2e343e42cde5["ElementBadges.js"]
  dcddba19_583a_b531_9a4f_941e70dcbf0a -->|defined in| 25e89372_6558_2e4a_04f5_2e343e42cde5
  style dcddba19_583a_b531_9a4f_941e70dcbf0a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/ElementBadges.js lines 24–53

export default function ElementBadges({
  compiledWithForget,
  environmentName,
  hocDisplayNames,
  className = '',
}: Props): React.Node {
  if (
    !compiledWithForget &&
    (hocDisplayNames == null || hocDisplayNames.length === 0) &&
    environmentName == null
  ) {
    return null;
  }

  return (
    <div className={`${styles.Root} ${className}`}>
      {compiledWithForget && <ForgetBadge indexable={false} />}

      {environmentName != null ? <Badge>{environmentName}</Badge> : null}

      {hocDisplayNames != null && hocDisplayNames.length > 0 && (
        <Badge>{hocDisplayNames[0]}</Badge>
      )}

      {hocDisplayNames != null && hocDisplayNames.length > 1 && (
        <div className={styles.ExtraLabel}>+{hocDisplayNames.length - 1}</div>
      )}
    </div>
  );
}