## 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
const handleCopy = () => copy(`${fileName}:${lineNumber}`);
  return (
    <div className={styles.Source}>
      <div className={styles.SourceHeaderRow}>
        <div className={styles.SourceHeader}>source</div>
        <Button onClick={handleCopy} title="Copy to clipboard">
          <ButtonIcon type="copy" />
        </Button>
      </div>
      <div className={styles.SourceOneLiner}>
        {formatSourceForDisplay(fileName, lineNumber)}
      </div>
    </div>
  );
}
type OwnerViewProps = {|
  displayName: string,
  hocDisplayNames: Array<string> | null,
  id: number,
  isInStore: boolean,
  type: ElementType,
|};
function OwnerView({
  displayName,
  hocDisplayNames,
  id,
  isInStore,
  type,
}: OwnerViewProps) {
  const dispatch = useContext(TreeDispatcherContext);