using dot notation in jsx
//Let's implement <Menu> <Menu.Item>Wow, anubra266</Menu.Item></Menu>
// menu.js
import React, { Component } from 'react';
export default const MenuItem = ({ children }) => <li>{children}</li>;
export default class Menu extends Component {
static Item = MenuItem;
render() {
return (
<ul>{this.props.children}</ul>
);
}
}
//----------------------------------------------------------------
//App.js
import React from 'react';
import { render } from 'react-dom';
import Menu from './menu';
const App = () => (
<Menu>
<Menu.Item>Home</Menu.Item>
<Menu.Item>Blog</Menu.Item>
<Menu.Item>About</Menu.Item>
</Menu>
);
render(<App />, document.getElementById('root'));