import React from 'react';
import R from 'ramda';

const InstanceInfo = ({ getWorkInfo, getTypeInfo, workIndex, wordIndex, url }) => {
  const workInfo = getWorkInfo(workIndex);
  const wordInfo = workInfo.wordInfos[wordIndex];
  const wordValues = wordInfo.v;
  const wordContextIndex = wordInfo.c;
  const wordProperties = (R.map) (v => getTypeInfo(v[0]).values[v[1]].t) (wordValues);
  const wordInfoElements = R.addIndex(R.map) ((x, i) => <span key={i} className="instanceInfo"> &mdash; {x}</span>) (wordProperties.slice(1));
  return (
    <div>
      <a href={url}>{wordProperties[0]}</a>
      {wordInfoElements}
    </div>
  );
};

export const InstanceList = ({ getWorkInfo, getTypeInfo, instances, typeIndex, valueIndex, getWordUrl }) => {
  const indexedInstances = R.addIndex(R.map) ((x, i) => ({ index: i, instance: x })) (instances);
  return (
    <div className="listContainer">
      {R.addIndex(R.map) ((x, i) => (
        <InstanceInfo
          key={typeIndex + '.' + valueIndex + '.' + i}
          getWorkInfo={getWorkInfo}
          getTypeInfo={getTypeInfo}
          workIndex={x[0]}
          wordIndex={x[1]}
          url={getWordUrl(x[0], x[1])}
        />
      )) (instances)}
    </div>
  );
};

@@ -808,27 +808,56 @@
 %7B in
-dex: i, instance: x
+stanceIndex: i, workIndex: x%5B0%5D, wordIndex: x%5B1%5D
  %7D))
@@ -926,39 +926,22 @@
      %7BR.
-addIndex(R.
 map
-)
  (
-(x, i)
+x
  =%3E (%0A  
@@ -1012,17 +1012,31 @@
 + '.' + 
-i
+x.instanceIndex
 %7D%0A      
@@ -1123,19 +1123,26 @@
 Index=%7Bx
-%5B0%5D
+.workIndex
 %7D%0A      
@@ -1157,19 +1157,26 @@
 Index=%7Bx
-%5B1%5D
+.wordIndex
 %7D%0A      
@@ -1200,17 +1200,31 @@
 rl(x
-%5B0%5D, x%5B1%5D
+.workIndex, x.wordIndex
 )%7D%0A 
@@ -1241,24 +1241,31 @@
       )) (in
+dexedIn
 stances)%7D%0A  

Tweak instance code.