## 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
D
      hasLegacyContext,
      displayName: getDisplayNameForFiber(fiber),
      type: elementType,
       I
       T
      context,
      hooks,
      props: memoizedProps,
      state: usesHooks ? null : memoizedState,
       L
      owners,
       L
      source: _debugSource || null,
    };
  }
  let mostRecentlyInspectedElement: InspectedElement | null = null;
  let hasElementUpdatedSinceLastInspected: boolean = false;
  let currentlyInspectedPaths: Object = {};
  function isMostRecentlyInspectedElementCurrent(id: number): boolean {
    return (
      mostRecentlyInspectedElement !== null &&
      mostRecentlyInspectedElement.id === id &&
      !hasElementUpdatedSinceLastInspected
    );
  }
   Track the intersection of currently inspected paths,
   so that we can send their data along if the element is re-rendered.
  function mergeInspectedPaths(path: Array<string | number>) {
    let current = currentlyInspectedPaths;