## The current behavior

The full value of the `key` is very difficult / impossible to find and use in the interface of the React Devtools.

![Kapture 2020-04-22 at 11 47 47](https://user-images.githubusercontent.com/1935696/79997715-25222680-84ba-11ea-97ba-51f1679a8c91.gif)

Only managed to find it by accident :(

## The expected behavior

The `key` is visible in the props list to the right.

### Detailed Proposal

As mentioned below in https://github.com/facebook/react/issues/18702#issuecomment-617924196

Add a light divider and new section in the props panel to the right.

Potentially also add a question mark that shows an explanation about the fact that things in this section are not really props.

Ref (Original implementation): https://github.com/facebook/react-devtools/pull/328
Element,
  InspectedElement as InspectedElementFrontend,
} from 'react-devtools-shared/src/devtools/views/Components/types';
import type {Resource, Thenable} from '../../cache';
export type StoreAsGlobal = (id: number, path: Array<string | number>) => void;
export type CopyInspectedElementPath = (
  id: number,
  path: Array<string | number>,
) => void;
export type GetInspectedElementPath = (
  id: number,
  path: Array<string | number>,
) => void;
export type GetInspectedElement = (
  id: number,
) => InspectedElementFrontend | null;
export type InspectedElementContextType = {|
  copyInspectedElementPath: CopyInspectedElementPath,
  getInspectedElementPath: GetInspectedElementPath,
  getInspectedElement: GetInspectedElement,
  storeAsGlobal: StoreAsGlobal,
|};
const InspectedElementContext = createContext<InspectedElementContextType>(
  ((null: any): InspectedElementContextType),
);
InspectedElementContext.displayName = 'InspectedElementContext';
type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;
type InProgressRequest = {|
  promise: Thenable<InspectedElementFrontend>,
  resolveFn: ResolveFn,