Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script type='text/javascript' src="http://fb.me/react-with-addons-0.12.1.js"></script>
</head>
<style type="text/css">
.CardsList-Card {
background-color: #ddeeaa;
font-size: 14px;
padding: 0.5em;
border: 2px solid green;
}
.CardsList {
border: 1px solid red;
}
</style>
<body>
<div id="CardsList"></div>
</body>
<script type="text/jsx">
var CardsListCard = React.createClass({
render: function () {
return (
<div className="CardsList-Card">
<div className="CardsList-Card-Name">
{this.props.card.name}
</div>
<div className="CardsList-Card-Job">
{this.props.card.job}
</div>
</div>
);
}
});
var CardsListAddCardWidget = React.createClass({
getInitialState: function () {
return {
name: "",
job: ""
}
},
handleNameChange: function (e) {
this.setState({name: e.target.value});
},
handleJobChange: function (e) {
this.setState({job: e.target.value});
},
handleAdd: function() {
this.props.handleAdd({name: this.state.name, job: this.state.job})
},
render: function () {
return (
<div className="CardsList-AddCardWidget">
<input type="text" placeholder="enter name" value={this.state.name} onChange={this.handleNameChange} />
<input type="text" placeholder="enter job" value={this.state.job} onChange={this.handleJobChange} />
<button onClick={this.handleAdd}>Add!</button>
</div>
);
}
});
var CardsList = React.createClass({
getInitialState: function () {
return {
cards: [
{id: 1, name: "Emil Soman", job: "hippie", company_name: "CodeMancers"},
{id: 2, name: "Jasim A Basheer", job: "wanderer", company_name: "NoWhere"},
],
filterText: "CodeMancers",
}
},
handleAdd: function (card) {
var cards = this.state.cards;
cards.push({id: cards.length, name: card.name, job: card.job});
this.setState({cards: cards});
},
handleFilterTextChange: function(e) {
this.setState({filterText: e.target.value});
},
render: function () {
var self = this;
var filteredCards = this.state.cards.filter(function(card) {
if(self.state.filterText.length == 0) return true;
return card.job == self.state.filterText
});
var cardsView = filteredCards.map(function (card) {
return (<CardsListCard card={card} />);
});
return (
<div className="CardsList">
<h1>MetaRefresh List of Cards</h1>
{cardsView}
<input type="text" value={this.state.filterText} onChange={this.handleFilterTextChange} />
<CardsListAddCardWidget handleAdd={this.handleAdd} />
</div>
);
}
});
React.render(
<CardsList />,
document.getElementById('CardsList')
);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment