Grid Example With React

by DiscoverSDK

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<h2>
hello
</h2>
<div id="content"></div>

JavaScript 1.7

var resources = [{'ResourceAddress': 'http://www.discoversdk.com', 'ResourceDescription':'Great site'}];

var MainApp = React.createClass({
	getInitialState: function() {
		return {items : resources};	
	},
	addItems: function(newItem){
		resources = resources.concat([newItem]);
		this.setState({items: resources}); 
	},
	removeItem: function(itemIndex){
		resources.splice(itemIndex, 1);
		this.setState({items: resources});
	},
	show: function(){
		alert(JSON.stringify(resources));
	},
	render: function(){ 
		return (
			<fieldset>
			<div>
				<h3>Add Resources</h3>
				<AddResourceForm onFormSubmit={this.addItems} />
				<a href="#" onClick={this.show}>Show</a>
				<h3>List of Resources</h3>
				<RecourceList items={this.state.items} removeItem={this.removeItem} /> 
			</div>
			</fieldset>
		); 
	} 
});

var RecourceList = React.createClass({ 
	render: function() {
		var that = this;
    var st = {
			backgroundColor: '#3b97d3',
			color: '#fff',
			padding: '5px',
			borderRight: 'solid 1px #3b97d3',
			borderLeft: 'solid 1px #fff'
		};
		var st2 = {
			padding: '5px',
			borderRight: 'solid 1px #d4d4d4',
			width: '250'
		};
		var createItem = function(itemText, index) { 
			return ( 
				<ResourceListItem removeItem={that.props.removeItem} key={index}>{itemText}</ResourceListItem> 
			); 
		};
		
		return (
			<table>
				<thead>
					<tr style={st}>
						<td style={st2}>Description</td>
						<td style={st2}>Url</td>
						<td></td>
					</tr>
				</thead>
				<tbody>
					{this.props.items.map(createItem)}
				</tbody>
			</table>
		) 
	} 
});

var ResourceListItem = React.createClass({
	getInitialState: function() { 
		return {ResourceDescription: this.props.children.ResourceDescription, ResourceAddress: this.props.children.ResourceAddress}; 
	},
	removeItem: function(e, index){
		this.props.removeItem(resources.indexOf(this.props.children));
	},
	updateDescription : function(e){
		resources[resources.indexOf(this.props.children)].ResourceDescription =...