Merge pull request #4095 from gombek/feature/addon-info-duplicated-keys-fix

fix #3933: Duplicated keys in PropTypes table

addons/info/src/components/PropTable.js

@@ -15,11 +15,9 @@ export const multiLineText = input => {
   const isSingleLine = arrayOfText.length < 2;
   return isSingleLine
     ? text
-    : arrayOfText.map((
-        lineOfText,
-        i // note: lineOfText is the closest we will get to a unique key
-      ) => (
-        <span key={lineOfText}>
+    : arrayOfText.map((lineOfText, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <span key={`${lineOfText}.${i}`}>
           {i > 0 && <br />} {lineOfText}
         </span>
       ));

addons/info/src/components/PropTable.test.js

@@ -9,6 +9,7 @@ describe('PropTable', () => {
     const singleLine = 'Foo bar baz';
     const unixMultiLineText = 'foo \n bar \n baz';
     const windowsMultiLineText = 'foo \r bar \r baz';
+    const duplicatedMultiLine = 'foo\nfoo\nfoo';
     const propDefinitions = [
       {
         defaultValue: undefined,
@@ -56,6 +57,12 @@ describe('PropTable', () => {
     it('should return an array for windows multiline text', () => {
       expect(multiLineText(windowsMultiLineText)).toHaveLength(3);
     });
+    it('should return an array with unique keys for duplicated multiline text', () => {
+      const wrappers = multiLineText(duplicatedMultiLine).map(tag => shallow(tag));
+      const keys = wrappers.map(wrapper => wrapper.key());
+      const deDup = new Set(keys);
+      expect(keys).toHaveLength(deDup.size);
+    });
     it('should have 2 br tags for 3 lines of text', () => {
       const tree = renderer.create(multiLineText(unixMultiLineText)).toJSON();
       expect(tree).toMatchSnapshot();

examples/official-storybook/components/DocgenButton.js

@@ -139,7 +139,9 @@ DocgenButton.propTypes = {
    */
   union: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Set)]),
   /**
-   * test string
+   * test string with a comment that has
+   * two identical lines
+   * two identical lines
    */
   optionalString: PropTypes.string,
 };