InspectedElementStateTree() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js lines 32–90

export default function InspectedElementStateTree({
  bridge,
  element,
  inspectedElement,
  store,
}: Props): React.Node {
  const {state, type} = inspectedElement;
  if (state == null) {
    return null;
  }

  // HostSingleton and HostHoistable may have state that we don't want to expose to users
  const isHostComponent = type === ElementTypeHostComponent;
  const entries = Object.entries(state);
  const isEmpty = entries.length === 0;
  if (isEmpty || isHostComponent) {
    return null;
  }

  entries.sort(alphaSortEntries);
  const handleCopy = withPermissionsCheck(
    {permissions: ['clipboardWrite']},
    () => copy(serializeDataForCopy(state)),
  );

  return (
    <div>
      <div className={styles.HeaderRow}>
        <div className={styles.Header}>state</div>
        {!isEmpty && (
          <Button onClick={handleCopy} title="Copy to clipboard">
            <ButtonIcon type="copy" />
          </Button>
        )}
      </div>
      {isEmpty && <div className={styles.Empty}>None</div>}
      {!isEmpty &&
        (entries: any).map(([name, value]) => (
          <KeyValue
            key={name}
            alphaSort={true}
            bridge={bridge}
            canDeletePaths={true}
            canEditValues={true}
            canRenamePaths={true}
            depth={1}
            element={element}
            hidden={false}
            inspectedElement={inspectedElement}
            name={name}
            path={[name]}
            pathRoot="state"
            store={store}
            value={value}
          />
        ))}
    </div>
  );
}