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

InspectedElementErrorsAndWarningsTree() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js lines 34–112

export default function InspectedElementErrorsAndWarningsTree({
  bridge,
  inspectedElement,
  store,
}: Props): React.Node {
  const refresh = useCacheRefresh();

  const [isErrorsTransitionPending, startClearErrorsTransition] =
    useTransition();
  const clearErrorsForInspectedElement = () => {
    const {id} = inspectedElement;
    const rendererID = store.getRendererIDForElement(id);
    if (rendererID !== null) {
      startClearErrorsTransition(() => {
        clearErrorsForElementAPI({
          bridge,
          id,
          rendererID,
        });
        refresh();
      });
    }
  };

  const [isWarningsTransitionPending, startClearWarningsTransition] =
    useTransition();
  const clearWarningsForInspectedElement = () => {
    const {id} = inspectedElement;
    const rendererID = store.getRendererIDForElement(id);
    if (rendererID !== null) {
      startClearWarningsTransition(() => {
        clearWarningsForElementAPI({
          bridge,
          id,
          rendererID,
        });
        refresh();
      });
    }
  };

  if (!store.displayingErrorsAndWarningsEnabled) {
    return null;
  }

  const {errors, warnings} = inspectedElement;
  if (errors.length === 0 && warnings.length === 0) {
    return null;
  }

  return (
    <React.Fragment>
      {errors.length > 0 && (
        <Tree
          badgeClassName={styles.ErrorBadge}
          bridge={bridge}
          className={styles.ErrorTree}
          clearMessages={clearErrorsForInspectedElement}
          entries={errors}
          isTransitionPending={isErrorsTransitionPending}
          label="errors"
          messageClassName={styles.Error}
        />
      )}
      {warnings.length > 0 && (
        <Tree
          badgeClassName={styles.WarningBadge}
          bridge={bridge}
          className={styles.WarningTree}
          clearMessages={clearWarningsForInspectedElement}
          entries={warnings}
          isTransitionPending={isWarningsTransitionPending}
          label="warnings"
          messageClassName={styles.Warning}
        />
      )}
    </React.Fragment>
  );
}

Domain

Subdomains

Defined In

Source

Frequently Asked Questions

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

Analyze Your Own Codebase

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

Try Supermodel Free