react Architecture Docs
Home / Function/ Tree() — react Function Reference

Tree() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

Dependency Diagram

graph TD
  38a59270_c1c0_3ca9_41c5_8231c4bcb8f9["Tree()"]
  e489f60d_6c21_9c69_16d7_a97323c0790f["InspectedElementErrorsAndWarningsTree.js"]
  38a59270_c1c0_3ca9_41c5_8231c4bcb8f9 -->|defined in| e489f60d_6c21_9c69_16d7_a97323c0790f
  style 38a59270_c1c0_3ca9_41c5_8231c4bcb8f9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js lines 125–160

function Tree({
  badgeClassName,
  actions,
  className,
  clearMessages,
  entries,
  isTransitionPending,
  label,
  messageClassName,
}: TreeProps) {
  if (entries.length === 0) {
    return null;
  }
  return (
    <div className={className}>
      <div className={`${sharedStyles.HeaderRow} ${styles.HeaderRow}`}>
        <div className={sharedStyles.Header}>{label}</div>
        <Button
          disabled={isTransitionPending}
          onClick={clearMessages}
          title={`Clear all ${label} for this component`}>
          <ButtonIcon type="clear" />
        </Button>
      </div>
      {entries.map(([message, count], index) => (
        <ErrorOrWarningView
          key={`${label}-${index}`}
          badgeClassName={badgeClassName}
          className={messageClassName}
          count={count}
          message={message}
        />
      ))}
    </div>
  );
}

Domain

Subdomains

Defined In

Source

Frequently Asked Questions

What does Tree() do?
Tree() is a function in the react codebase, defined in packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js.
Where is Tree() defined?
Tree() is defined in packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js at line 125.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free