Fixed a truly embarrassing correctness bug. Don't really know how I t…

…hought the previous version would have worked.
facebook · Dec 4, 2017 · 105e925 · 105e925
1 parent f3dae68
commit 105e925
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
@@ -32,20 +32,16 @@ const escapeRegex = /[=:]/g;
 function escape(key: string): string {
   const str = '' + key;
 
-  const match = escapeRegex.exec(str);
-
-  // shortcut optimization for keys that don't have ":" or "="
-  if (!match) {
-    return '$' + str;
-  }
-
   let escapeChar;
   let result = '$';
-  let index = 0;
   let lastIndex = 0;
 
-  for (index = match.index; index < str.length; index++) {
-    switch (str.charCodeAt(index)) {
+  for (
+    let match = escapeRegex.exec(str);
+    match;
+    match = escapeRegex.exec(str)
+  ) {
+    switch (str.charCodeAt(match.index)) {
       case 61: // =
         escapeChar = '=0';
         break;
@@ -56,15 +52,13 @@ function escape(key: string): string {
         continue;
     }
 
-    if (lastIndex !== index) {
-      result += str.substring(lastIndex, index);
+    if (lastIndex !== match.index) {
+      result += str.substring(lastIndex, match.index);
     }
-    lastIndex = index + 1;
+    lastIndex = match.index + 1;
     result += escapeChar;
   }
-  return lastIndex !== index
-    ? result + str.substring(lastIndex, index)
-    : result;
+  return result + str.substring(lastIndex);
 }
 
 /**

diff --git a/packages/react/src/__tests__/ReactChildren-test.js b/packages/react/src/__tests__/ReactChildren-test.js
@@ -911,10 +911,20 @@ describe('ReactChildren', () => {
   it('should escape keys', () => {
     const zero = <div key="1" />;
     const one = <div key="1=::=2" />;
+    const two = <div key="=foo" />;
+    const three = <div key="foo=" />;
+    const four = <div key=":foo" />;
+    const five = <div key="foo:" />;
+    const six = <div key="foo" />;
     const instance = (
       <div>
         {zero}
         {one}
+        {two}
+        {three}
+        {four}
+        {five}
+        {six}
       </div>
     );
     const mappedChildren = React.Children.map(
@@ -924,6 +934,11 @@ describe('ReactChildren', () => {
     expect(mappedChildren).toEqual([
       <div key=".$1" />,
       <div key=".$1=0=2=2=02" />,
+      <div key=".$=0foo" />,
+      <div key=".$foo=0" />,
+      <div key=".$=2foo" />,
+      <div key=".$foo=2" />,
+      <div key=".$foo" />,
     ]);
   });