A simple todo list in ReactJS

Question

I have a working useless todo app created with ReactJS. I'm just wondering if my code can be improved.

This app can add a todo item and it can display editable list of todo items.

This is my ReactJS code.

var TodoApp = React.createClass({
 getInitialState: function() {
 return {items: []};
 },
 addItem: function(item) {
 var allItems = this.state.items.concat([item]);
 this.updateItems(allItems);
 },
 editItem: function(editedItem) {
 var allItems = this.state.items.map(function(item) {
 if (item.id !== editedItem.id) {
 return item;
 }
 return editedItem;
 });
 this.updateItems(allItems);
 },
 updateItems: function(items) {
 this.setState({items: items});
 },
 render: function() {
 return (
 <div className="todo-app">
 <TodoForm onFormSubmit={this.addItem}/>
 <TodoList items={this.state.items} onItemEdit={this.editItem}/>
 </div>
 );
 }
});
var TodoForm = React.createClass({
 getInitialState: function() {
 return {item: {id: 0, title: '', description: ''}};
 },
 render: function() {
 return (
 <form onSubmit={this.handleSubmit}>
 <input type="hidden" ref="id" value={this.state.item.id} onChange={this.handleUserInput}/>
 <input type="text" ref="title" value={this.state.item.title} onChange={this.handleUserInput}/>
 <input type="text" ref="description" value={this.state.item.description} onChange={this.handleUserInput}/>
 <input type="submit" value="Add"/>
 </form>
 );
 },
 handleSubmit: function(e) {
 e.preventDefault();
 this.props.onFormSubmit(this.state.item);
 this.setState({item: {id: 0, title: '', description: '', done: false}});
 },
 handleUserInput: function() {
 this.setState({item: {
 id: this.refs.id.value,
 title: this.refs.title.value,
 description: this.refs.description.value,
 done: false
 }});
 }
});
var TodoList = React.createClass({
 render: function() {
 var component = this;
 var itemNodes = this.props.items.map(function(item) {
 return <TodoListItem key={item.title} item={item} onFormSubmit={component.props.onItemEdit}/>
 });
 return (
 <ul>{itemNodes}</ul>
 );
 }
});
var TodoListItem = React.createClass({
 getInitialState: function() {
 return {
 id: this.props.item.id,
 done: this.props.item.done,
 title: this.props.item.title,
 description: this.props.item.description,
 };
 },
 render: function() {
 return (
 <li>
 <form onSubmit={this.handleFormSubmit}>
 <input type="hidden" ref="id" value={this.state.id}/>
 <input type="checkbox" ref="done" value={this.state.done} onChange={this.handleUserInput}/>
 <input type="text" ref="title" value={this.state.title} onChange={this.handleUserInput}/>
 <input type="text" ref="description" value={this.state.description} onChange={this.handleUserInput}/>
 <input type="submit" value="Save"/>
 </form>
 </li>
 );
 },
 handleUserInput: function() {
 this.setState({
 id: this.refs.id.value,
 done: this.refs.done.checked,
 title: this.refs.title.value,
 description: this.refs.description.value
 });
 },
 handleFormSubmit: function(e) {
 e.preventDefault();
 this.props.onFormSubmit(this.state);
 }
});
ReactDOM.render(<TodoApp/>, document.getElementById('todoListBox'));

ReactJS said in their docs that components should be stateless as possible. I'm aware that in the TodoListItem component, It has a state based from its props. I did that so I can change the form inside TodoListItem.

Is there any other possible solutions to do this other than their two way binding add-on?

Answer 1

So I managed to eliminate the TodoListItem's state, which is based on its props, by reusing the TodoForm component with a minor tweak for an inline form.

This is the TodoListItem and TodoForm component now.

var TodoForm = React.createClass({
 getInitialState: function() {
 return {item: {
 id: this.props.todoId,
 title: this.props.todoTitle,
 description: this.props.todoDescription,
 done: this.props.todoDone
 },
 isAnInlineForm: this.props.isAnInlineForm};
 },
 render: function() {
 return (
 <form onSubmit={this.handleSubmit}>
 <input type="checkbox" ref="done" checked={this.state.item.done} onChange={this.handleUserInput}/>
 <input type="hidden" ref="id" value={this.state.item.id} onChange={this.handleUserInput}/>
 <input type="text" ref="title" value={this.state.item.title} onChange={this.handleUserInput}/>
 <input type="text" ref="description" value={this.state.item.description} onChange={this.handleUserInput}/>
 <input type="submit" value="Save"/>
 </form>
 );
 },
 handleSubmit: function(e) {
 e.preventDefault();
 this.props.onFormSubmit(this.state.item);
 if (!this.state.isAnInlineForm) {
 this.setState({item: {id: 0, title: '', description: '', done: false}});
 }
 },
 handleUserInput: function() {
 this.setState({item: {
 id: this.refs.id.value,
 title: this.refs.title.value,
 description: this.refs.description.value,
 done: this.refs.done.checked
 }});
 }
});
var TodoListItem = React.createClass({
 render: function() {
 return (
 <li>
 <TodoForm onFormSubmit={this.handleFormSubmit}
 todoId={this.props.item.id}
 todoDone={this.props.item.done}
 todoTitle={this.props.item.title}
 todoDescription={this.props.item.description}
 isAnInlineForm={true}
 />
 </li>
 );
 },
 handleFormSubmit: function(item) {
 this.props.onFormSubmit(item);
 }
});