Collapse does not work when Panel is inside another component

[oluckyman]

Version

2.10.0

Environment

osx Chrome 58

Reproduction link

http://codepen.io/anon/pen/OmwYeG?editors=001

Steps to reproduce

use Panel inside another component

What is expected?

Collapse should work

What is actually happening?

it makes broken HTML

---

Example:

<Collapse>
  { items.map(item => <Item name={item.name} />) }
</Collapse>

const Item = ({ name }) => <Panel header={name} key={name}>...</Panel>;

It does not work.
It produces this HTML:

So it’s impossible to separate concerns between List component and List item components.

[benjycui]

Trace: #4853

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.