react-bootstrap and Panel.Body

Question

I'm new to React, so maybe I'm missing something here, but I want to use the Panel component from react-bootstrap. I'm following the documentation, but getting the following behavior.

This code works:

import { Panel } from 'react-bootstrap';

(...)

return ( # This is inside my component's render()
    <Panel>
        Foo
    </Panel>
)

This code doesn't work:

import { Panel } from 'react-bootstrap';

(...)

return ( # This is inside my component's render()
    <Panel>
        <Panel.Body>Foo</Panel.Body>
    </Panel>
)

The error says: Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of (ComponentName).

What am I doing wrong? Many thanks!

react 15.6.2, react-bootstrap 0.31.5

Answer 1

Please change to:
import Panel from 'react-bootstrap/lib/Panel'

When importing from react-bootstrap you need to import the component from the lib folder.