Multiple export with dot notation

function Sidebar(props) {
    return (
        <div className="sidebar">
          { props.children }
        </div>
    );
}


function Item (props) {
    return (
        <div>
            <b> { this.props.name } </b>
        </div>
    );
}

Sidebar.Item = {Item}

export default Sidebar

Then you can use it like this

import Sidebar from './Sidebar.js'

...

return (
    <Sidebar>
        <Sidebar.Item />
    </Sidebar>
)

If you're using class based components, you can remove the curly braces

class Sidebar extends Component {
   render() {
       return (
           <div className="sidebar">
               {this.props.children}
           </div>
       );
   }
}


class SidebarItem extends Component {
    render() {
        return (
            <div>
                <b> {props.name} </b>
            </div>
    );
}

Sidebar.Item = SidebarItem;

export default Sidebar;

I learned this practice from a coworker that saw it in semantic ui's table here.