hoc components require keys when displayed next to each other

[zhipenglin]

same hoc wrap component put in storybook

warning:Encountered two children with the same key, 1:$. Child keys must be unique; when two children share a key, only the first child will be used.

such as:

const hoc=(WrapComponent)=>({...props})=><WrapComponent {...props} />

const Input=hoc(()=><input type="text" />);

const TextArea=hoc(({children})=><textarea>{children}</textarea>);

storiesOf('XXX', module)
    .add('XXX', withInfo()(() => <div>
        <Input/><TextArea></TextArea>
    </div>))

normal Running environment has not this warning.

[danielduan]

I'm guessing react thinks these are a list of the same components and thus require keys to identify themselves.
https://facebook.github.io/react/docs/lists-and-keys.html

You could get around it by wrapping the <Input/> and <TextArea/> with their own <div>.

[johnnyBira]

I have the same issue. Two different components using the same HOC.

In my case it seams the two components get their key based on the name from the HOC, getGridConfig:

Encountered two children with the same key, 'getGridConfig'. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Is this related to storybook or react?
Feeling perplexed :/

[Hypnosphi]

Issue is present only when using addon-info. Current workaround is to give your components different displayNames, like this:

const hoc = (WrapComponent) => ({...props}) => <WrapComponent {...props} />

const Input = hoc(() => <input type="text" />)
Input.displayName = 'Input'

const TextArea = hoc(({children}) => <textarea>{children}</textarea>)
TextArea.displayName = 'TextArea'

storiesOf('XXX', module)
    .add('XXX', withInfo()(() => (
        <div>
            <Input/><TextArea></TextArea>
        </div>
    )))

Actually, if you use addon-info, you may want to add displaynames anyway, so that your component names are displayed correctly in prop tables: https://github.com/storybooks/storybook/tree/master/addons/info#the-faq

[johnnyBira]

Thank you.

Removed addon-info and not seeing the error any more. However the workaround dosen't do to for me.

Column.displayName = 'Column';
export default getGridConfig(Column);

Still seeing the error and under info the HOC is displayed rather than the name of the wrapped component.

Instead of seeing:

<Column columns={{xxs: {2}}}>

I'm getting:

<getGridConfig columns={{xxs: {2}}}>

I'm on version 3.2.12 if that makes a difference.

[Hypnosphi]

It should rather be

const GridColumn = getGridConfig(Column);
GridColumn.displayName = 'Column';
export default GridColumn;

There is also in issue regarding displaying HOCs in addon-info: #938

[Hypnosphi]

By the way, the fix for key waning has landed in 3.2.15