React js- dynamic json

Hello React - dynamic components. author(s): Ryan Vice

by Allie Yu

HTML

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>

<div id="view"/>

Babel + JSX

var UserRow = React.createClass({
	render: function() {
    	return (
            <tr>
                <td>{this.props.user.userName}</td>
                <td>
                    <a href={'mailto:' + this.props.user.email}>
                        {this.props.user.email}
                    </a>
                </td>
            </tr>
        );
    }
});

var UserList = React.createClass({
	getInitialState: function() {
    	 return { 
         	users: [
        		{id: 3, userName: 'AllieYu', email: '[email protected]'},
            {id: 2, userName: 'Allie', email: '[email protected]'}
          ]
         };
    },
    render: function() {
    	var users = this.state.users.map(function(user) {
        // key prevents react warning
        	return <UserRow user={user} key={user.id}/>
		});
        
        return (
        	<table>
            	<tr>
                	<th>User Name</th>
                	<th>Email Address</th>
                </tr>
                {users}
            </table>
            );
	}
});

ReactDOM.render(
    <UserList/>,
    document.getElementById('view'));