Skip to content

Instantly share code, notes, and snippets.

@JamesRandall JamesRandall/todo.jsx forked from caike/todo.jsx
Last active Aug 2, 2016

Embed
What would you like to do?
Simple Todo app demo using React + ES6
var allItems = []
allItems.push("Buy ingredients for Crock Pot");
allItems.push("Pick up chair at IKEA");
allItems.push("Go see mom");
class TodoList extends React.Component {
constructor(props){
super(props);
}
getInitialState() {
return { allItems };
}
render() {
var items = this.props.items.map((item) => {
return <li><TodoItem item={item} /></li>;
})
return(
<div>
<ul>{items}</ul>
<p><NewTodoItem addEvent={(item) => this.addEvent(item)} /></p>
</div>
);
}
addEvent(todoItem){
allItems.push(todoItem.newItem);
this.setState({ allItems });
}
}
class TodoItem extends React.Component {
render(){
return <div>{this.props.item}</div>;
}
}
class NewTodoItem extends React.Component {
constructor(props){
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
componentDidMount(){
React.findDOMNode(this.refs.itemName).focus();
}
render(){
return (<form onSubmit={this.onSubmit}>
<input ref="itemName" type="text" />
</form>);
}
onSubmit(event){
event.preventDefault();
var input = React.findDOMNode(this.refs.itemName)
var newItem = input.value;
this.props.addEvent({ newItem });
input.value = '';
}
}
React.render(<TodoList items={allItems} />, document.getElementById('container'));
@JamesRandall

This comment has been minimized.

Copy link
Owner Author

commented Aug 2, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.