This is very clear, thank you @kirupa!
1 Like
@kirupa Sir, may i ask you about how to view the array with all those added input in window console? Moreover, what if i want add a function to delete the added task? How to write it?
You can use console.log on the items array to inspect what is happening. To delete an added task, that requires a little bit more wrangling. It’s on my list of things to describe in the future, but I don’t have it done yet - sorry 
Typo:
Type in a task or item or whatever you want into the inout field and press Add (or hit Enter/Return) => Type in a task or item or whatever you want into the input* field and press Add (or hit Enter/Return)
Haha! Thanks for pointing it out. I just fixed it
HELP!
I’ve reached this stage:
“Take a moment to glance at what we’ve added. There is a bunch of JSX that gets our form elements up and running. To use our newly created TodoList component, let’s go back to index.js and reference it to see what our app looks like right now. Go ahead and make the following two changes:”
I saved all the changes and previewed in the browser but it’s blank!
For some reason the index.html file in src isn’t being updated from sublime text.
If you open up the developer tools for your browser, are there any errors being reported?
The elements are showing up ok in dev tools …
Can’t see any errors …
As in you can see the HTML elements getting rendered to the DOM in the dev tools? But they’re not showing in the page? When you say “blank” is it white or blue? Have you checked your terminal/command prompt to see if npm start had reported any errors?
I checked npm and then it started wotking!!! 
Thanks, for now!
2 Likes
I fixed it, thanks anyway!
1 Like
Thank you for the way how you explain the Todo app in React. This is my second contact with React, first one was ‘Hello, World’, also with your example.
I want to go ahead, but I am stuck.
I copy code text to my IDE, so everything should work, but I got message:
It looks like this.props.entries isn’t returning any values or is something other than an Array. Can you check if that is indeed the case?
Thank you for your reply. Yes, that’s true. I check it before. Its returning ‘undefined’. How it is possible, that I have the same code like on your tutorial and in my code is error?
Is your state being properly initialized in the constructor? And is entries getting defined with:
<TodoItems entries={this.state.items}/>
?
There was my mistake, thank you for your time.
Next time I will be more watchful.
1 Like
Glad you figured it out!
2 Likes
hi there, love the walkthrough but having some trouble.
At the part whee we try to get the tasks to print on the page, but when i hit enter they are only logging to the console.
// todoitems.js
import React, { Component } from 'react';
class TodoItems extends Component {
constructor(props, context) {
super(props, context);
this.createTasks = this.createTasks.bind(this);
}
createTasks(item) {
return <li key={item.key}>{item.text}</li>;
}
render() {
var todoEntries = this.props.entries;
var listItems = todoEntries.map(this.createTasks);
return (
<ul className='theList'>
{listItems}
</ul>
);
}
}
export default TodoItems;
// todolist.js
import React, { Component } from 'react';
import TodoItems from '../TodoItems/TodoItems';
import '../TodoList/TodoList.css';
class TodoList extends Component {
constructor(props, context) {
super(props, context);
this.state = {
items: []
};
this.addItem = this.addItem.bind(this);
}
addItem(e) {
const itemArray = this.state.items;
if (this._inputElement.value !== '') {
itemArray.unshift({
text: this._inputElement.value,
key: Date.now()
});
this._inputElement.value = '';
}
console.log(itemArray);
e.preventDefault();
}
render() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.addItem}>
<input ref={(a) => this._inputElement = a}
placeholder="enter task">
</input>
<button type="submit">add</button>
</form>
</div>
<TodoItems entries={this.state.items}/>
</div>
);
}
}
export default TodoList;
thanks! cannot see what is going wrong here!