React Menu example

by Rich Costello

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Link extends React.Component {
	render() {
  	const url='/'
    + this.props.label
    		.toLowerCase()
        .trim()
        .replace(' ', '-')
    return <div>
      <a href={url}>
        {this.props.label}
      </a>
      <br/>
    </div>
  }
}

class Menu extends React.Component {
  render() {
    let menus = [
    'Home',
    'Services',
    'Portfolio',
    'Contact us',
    'Doo da do ey'
    ]
    return <div>
      {menus.map((v, i) => {
      	return <div key={i}><Link label={v} /></div>
      })}
    </div>
    }}
    
    ReactDOM.render(
  <Menu />,
  document.getElementById('container')
);