Multiselect custom footer - react warning in the console

[namrastanov]

• Bug report

Current behavior

When I add a footer to multiselect as is in documentation everything works fine, but I have the warning message in the console: Warning: Each child in a list should have a unique "key" prop. Check the render method of MultiSelect. It was passed a child from Multiselect. See https://fb.me/react-warning-keys for more information.

Expected behavior

Adding footer without any warning messages in the console

Minimal reproduction of the problem with instructions

let data = [{text: "Hello"}];
    return (
      <div>
        <MultiSelect
                data={data}

                header={<span style={{ marginLeft: '60px' }}>header</span>}
                footer={<span style={{ marginLeft: '60px' }}>footer</span>}/>
      </div>
    );

Environment

Package versions: @progress/kendo-react-dropdowns": "^3.9.0"

System:

• node --version v12.13.1
• npm --version 6.12.1
• Platform: Windows

Looks like need to add the "key" attribute to the <li>

[nstoychev]

@namrastanov - You can set a key to both header and footer components.

<MultiSelect               
   header={<span key="h" style={{ marginLeft: '60px' }}>header</span>}
   footer={<span key="f" style={{ marginLeft: '60px' }}>footer</span>}
/>

We will also refactor the header and footer components rendering, so a key not to be required.

[namrastanov]

@nstoychev , this way is not helping because key should be added to the <li> but not to it content

[nstoychev]

The header and footer components are passed to the render function in an array and that's why the warning appear. They are not rendered in a list - https://stackblitz.com/edit/react-wuizis?file=app/main.jsx.

[namrastanov]

Yeap, sorry. It helped finally. Thank you.

I'm using another component for footer and turned out I was needed to add the key exactly on using my component but not on the rendering part of it.

footer={<MultiselectFooter key="multiselect-footer" />}/>

[Xizario]

Fixed in 3.11.0