diff --git a/packages/element/src/create-interpolate-element.js b/packages/element/src/create-interpolate-element.js
index 1f20bb32f38581..602025b36feb6e 100644
--- a/packages/element/src/create-interpolate-element.js
+++ b/packages/element/src/create-interpolate-element.js
@@ -1,7 +1,6 @@
/**
* Internal dependencies
*/
-import { getTokenCount, resetTokenCount } from './token-count';
import { createElement, Fragment, isValidElement } from './react';
/**
@@ -108,14 +107,19 @@ const getMatchFromString = (
return interpolatedString.match( regEx );
};
+// index for keys
+// This is external to `recursiveCreateElement` and reset in
+// `createInterpolateElement` because of the recursion.
+let keyIndex = -1;
+
/**
* Used to recursively create elements from the interpolation string using the
* conversion map.
*
- * @param {string} potentialElement The interpolation string (or fragment)
- * being processed.
- * @param {Array[]}conversionMap The interpolation map used for converting
- * the string to a react element.
+ * @param {string} potentialElement The interpolation string (or fragment)
+ * being processed.
+ * @param {Array[]} conversionMap The interpolation map used for converting
+ * the string to a react element.
*
* @return {Element|string|Array} A react element, string or array.
*/
@@ -129,7 +133,6 @@ const recursiveCreateElement = ( potentialElement, conversionMap ) => {
}
const [ mapItem ] = conversionMap.slice( 0, 1 );
const [ searchString, conversionConfig ] = mapItem;
- let keyIndex;
/**
* This short circuits the process if the conversion map has an invalid config.
@@ -161,12 +164,12 @@ const recursiveCreateElement = ( potentialElement, conversionMap ) => {
// if value is a react element, then need to wrap in Fragment with a key
// to prevent key warnings.
if ( isValidElement( conversionConfig.value ) ) {
- keyIndex = getTokenCount( 'key' );
+ keyIndex++;
return { conversionConfig.value };
}
return conversionConfig.value;
}
- keyIndex = getTokenCount( 'key' );
+ keyIndex++;
return getHasChildren( conversionConfig ) ?
createElement(
conversionConfig.tag,
@@ -218,14 +221,14 @@ const recursiveCreateElement = ( potentialElement, conversionMap ) => {
* @return {Element} A react element.
*/
const createInterpolateElement = ( interpolatedString, conversionMap ) => {
- resetTokenCount();
+ keyIndex = -1;
return createElement(
Fragment,
{},
recursiveCreateElement(
interpolatedString,
Object.entries( conversionMap )
- )
+ ),
);
};
diff --git a/packages/element/src/test/create-interpolate-element.js b/packages/element/src/test/create-interpolate-element.js
index 73f3e506f6a1d8..58dcaa777ca724 100644
--- a/packages/element/src/test/create-interpolate-element.js
+++ b/packages/element/src/test/create-interpolate-element.js
@@ -47,7 +47,7 @@ describe( 'createInterpolateElement', () => {
'This is a string with ',
createElement(
'a',
- { href: 'https://github.com', className: 'some_class', key: 1 },
+ { href: 'https://github.com', className: 'some_class', key: 0 },
'a link'
),
'.',
@@ -72,12 +72,12 @@ describe( 'createInterpolateElement', () => {
'This is a ',
createElement(
'a',
- { key: 1 },
+ { key: 0 },
[
'string that is ',
createElement(
'em',
- { key: 2 },
+ { key: 1 },
'linked'
),
]
@@ -121,7 +121,7 @@ describe( 'createInterpolateElement', () => {
'This is a string with a ',
createElement(
TestComponent,
- { key: 1 },
+ { key: 0 },
'Custom Component'
),
]
@@ -145,7 +145,7 @@ describe( 'createInterpolateElement', () => {
'This is a string with a self closing custom component: ',
createElement(
TestComponent,
- { key: 1 }
+ { key: 0 }
),
]
);
@@ -171,12 +171,12 @@ describe( 'createInterpolateElement', () => {
' value, with a ',
createElement(
'a',
- { key: 1 },
+ { key: 0 },
[
'nested ',
createElement(
'em',
- { key: 2 },
+ { key: 1 },
'value'
),
' link',
@@ -185,7 +185,7 @@ describe( 'createInterpolateElement', () => {
' and value: ',
createElement(
Fragment,
- { key: 3 },
+ { key: 2 },
,
),
]
diff --git a/packages/element/src/token-count.js b/packages/element/src/token-count.js
deleted file mode 100644
index d0c16ae941709c..00000000000000
--- a/packages/element/src/token-count.js
+++ /dev/null
@@ -1,25 +0,0 @@
-let tokenCount = {};
-
-const updateTokenCount = ( type ) => {
- if ( typeof tokenCount[ type ] === 'undefined' ) {
- tokenCount[ type ] = 0;
- }
- tokenCount[ type ]++;
-};
-
-const getTokenCount = ( type ) => {
- if ( typeof tokenCount[ type ] === 'undefined' ) {
- tokenCount[ type ] = 0;
- }
- updateTokenCount( type );
- return tokenCount[ type ];
-};
-
-const resetTokenCount = () => {
- tokenCount = {};
-};
-
-export {
- getTokenCount,
- resetTokenCount,
-};