var contacts = [
{key: 1, name: "James K Nelson", email: "james@jamesknelson.com", description: "Front-end Unicorn"},
{key: 2, name: "Jim", email: "jim@example.com"},
{key: 3, name: "Joe"},
]
var ContactItem = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
email: React.PropTypes.string.isRequired,
description: React.PropTypes.string,
},
render: function() {
// I wrap mult-line return statements in parentheses to avoid the
// inevitable bugs caused by forgetting that JavaScript will throw away
// the final lines when possible. The parentheses are not strictly
// necessary.
return (
React.createElement('li', {},
React.createElement('h2', {}, this.props.name),
React.createElement('a', {href: 'mailto:'+this.props.email}, this.props.email),
React.createElement('div', {}, this.props.description)
)
)
},
})
var contactItemElements = contacts
.filter(function(contact) { return contact.email })
.map(function(contact) { return React.createElement(ContactItem, contact) })
var rootElement =
React.createElement('div', {},
React.createElement('h1', {}, "Contacts"),
React.createElement('ul', {}, contactItemElements)
)
ReactDOM.render(rootElement, document.getElementById('react-app'))
<div id="react-app"></div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>