import React from 'react';

const ActionPreviewHeader =
  ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) =>
  <div key='previewHeader' {...styling('previewHeader')}>
    <div {...styling('tabSelector')}>
      {tabs.map(tab =>
        <div onClick={() => onSelectTab(tab.name)}
             key={tab.name}
          {...styling([
            'selectorButton',
            tab.name === tabName && 'selectorButtonSelected'
          ], tab.name === tabName)}>
          {tab.name}
        </div>
      )}
    </div>
    <div {...styling('inspectedPath')}>
      {inspectedPath.length ?
        <span {...styling('inspectedPathKey')}>
          <a onClick={() => onInspectPath([])}
            {...styling('inspectedPathKeyLink')}>
            {tabName}
          </a>
        </span> : tabName
      }
      {inspectedPath.map((key, idx) =>
        idx === inspectedPath.length - 1 ? <span>{key}</span> :
          <span key={key}
            {...styling('inspectedPathKey')}>
          <a onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
            {...styling('inspectedPathKeyLink')}>
            {key}
          </a>
        </span>
      )}
    </div>
  </div>;

export default ActionPreviewHeader;

import React from 'react';

const ActionPreviewHeader =
  ({ styling, inspectedPath, onInspectPath, tabName, onSelectTab, tabs }) =>
  <div key='previewHeader' {...styling('previewHeader')}>
    <div {...styling('tabSelector')}>
      {tabs.map(tab =>
        <div onClick={() => onSelectTab(tab.name)}
             key={tab.name}
          {...styling([
            'selectorButton',
            tab.name === tabName && 'selectorButtonSelected'
          ], tab.name === tabName)}>
          {tab.name}
        </div>
      )}
    </div>
    <div {...styling('inspectedPath')}>
      {inspectedPath.length ?
        <span {...styling('inspectedPathKey')}>
          <a onClick={() => onInspectPath([])}
            {...styling('inspectedPathKeyLink')}>
            {tabName}
          </a>
        </span> : tabName
      }
      {inspectedPath.map((key, idx) =>
        idx === inspectedPath.length - 1 ? <span key={key}>{key}</span> :
          <span key={key}
            {...styling('inspectedPathKey')}>
          <a onClick={() => onInspectPath(inspectedPath.slice(0, idx + 1))}
            {...styling('inspectedPathKeyLink')}>
            {key}
          </a>
        </span>
      )}
    </div>
  </div>;

export default ActionPreviewHeader;

Fix React warning about unique "key"
Fix React warning about unique "key"