how to use span in react code example

Example 1: 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'));

Example 2: inline style react

// Typical component with state-classes
<ul className="todo-list">
  {this.state.items.map((item,i)=>({
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })}>
            {item.name}
</li>
 })}
</ul>

// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />