changed name from items to todos

Author: neerajsingh0101

ep10-model-todo/app/components/App.jsx

@@ -5,24 +5,24 @@ export default class App extends React.Component {
 
   constructor () {
     super();
-    this.state = { title: '', items: ['eggs', 'banana', 'bread'] };
+    this.state = { title: '', todos: ['eggs', 'banana', 'bread'] };
   }
 
   handleDelete (titleToBeDeleted) {
-    var newItems = this.state.items.filter( (_title) => {
+    var newTodos = this.state.todos.filter( (_title) => {
       return _title != titleToBeDeleted
     } )
 
-    this.setState({ items: newItems });
+    this.setState({ todos: newTodos});
   }
 
   handleSubmit (event) {
     event.preventDefault();
 
     var title = this.state.title;
-    var newItems = this.state.items.concat(title);
+    var newTodos = this.state.todos.concat(title);
 
-    this.setState({ title: '', items: newItems });
+    this.setState({ title: '', todos: newTodos });
   }
 
   handleChange (event) {
@@ -39,15 +39,15 @@ export default class App extends React.Component {
               </form>
 
               <p>
-                Number of total tasks: { this.state.items.length }
+                Number of total tasks: { this.state.todos.length }
               </p>
               <p>
-                Number of total tasks done: { this.state.items.filter((title) => { title.done }).length }
+                Number of total tasks done: { this.state.todos.filter((title) => { title.done }).length }
               </p>
 
               <DisplayList
                 handleDelete={this.handleDelete.bind(this)}
-                items={this.state.items}  />
+                todos={this.state.todos}  />
             </div>;
   }
 }

ep10-model-todo/app/components/DisplayItem.jsx

@@ -13,7 +13,7 @@ export default class DisplayItem extends React.Component {
   }
 
   render () {
-    var item = this.props.item;
+    var title = this.props.title;
 
     return <li>
               <input
@@ -22,8 +22,8 @@ export default class DisplayItem extends React.Component {
                 type="checkbox"
                 style={{ fontSize: 'x-large' }} />
 
-              { item }
-              <a href='#' onClick={ this.props.handleDelete.bind(null, item) }>
+              { title }
+              <a href='#' onClick={ this.props.handleDelete.bind(null, title) }>
                 [x]
               </a>
            </li>;

ep10-model-todo/app/components/DisplayList.jsx

@@ -5,11 +5,11 @@ export default class DisplayList extends React.Component {
 
   render () {
     return <ul>
-            { this.props.items.map((item, i) => {
+            { this.props.todos.map((title, i) => {
               return <DisplayItem
-                        key={item}
-                        item={item}
-                        handleDelete={this.props.handleDelete.bind(null, item)} />;
+                        key={title}
+                        title={title}
+                        handleDelete={this.props.handleDelete.bind(null, title)} />;
             }) }
            </ul>
   }