+ Repo –
+ Atom editor –
+ Download GIT –

JS Playlist –

HTML Playlist –

NODEJS Playlist –

You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…


========== PSD to WordPress Playlist ==========

============ Node.js for Beginners Playlist =============

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – or

================== Social Links ==================

Twitter – @TheNetNinja –


  1. Not a huge problem but I noticed that identical strings in the array, all get removed on one click (onDelete event). Instead of just that entry on its own. Anyone know how you'd go about debugging that?

  2. honestly, at this point, even thought I understood this; React looks like a huge mess for no reason… jumping loops from component to component just to make the variables pass seems like a lot of work… especially since it's on the front end.

  3. Hey Net Ninja. I want to ask u about functions. So why we have to create firstly onDelete , then we pass logic to handleDelete function , why it is so many function? Can we write logic exactly in onHandleDelete?

  4. Been stuck at this for hours now. Help will be greatly appreciated. I am getting a strange error in this line of code:

    var updatedTodos = this.state.todos.filter((val, index) => {
    return item !== val;

    Error message: Uncaught TypeError: Cannot read property 'todos' of undefined.

  5. This is a fantastic explanation of events and handing function actions between child and parent components! I had a vague understanding of this concept (never felt comfortable with it) but this video truly gave me an understanding of it. I am truly grateful! I don't think I'll ever forget how to do this now.

  6. If you're following these tutorials and using es6/es2015 for some reason, you'll have to bind both methods described in this video, or else you'll get some 'undefined' references.

    Best thing to do (as of now, a es6 "era") is to bind them in a constructor:

    // TodoList ctor
    this.onDelete = this.onDelete.bind(this);

    // TodoItem ctor
    this.handleDelete = this.handleDelete(this);

  7. I'm a little confused about the bind(this) method. Can someone please explain, in the Custom function section of the TodoItem Component, why we don't need to add bind(this)?

    handleDelete: function(){

    As far my understanding if the "this" keyword is within a function it refers to that function instead of the parent component. In the above coding, this.props.onDelete should refer to the handleDelete function and not the TodoItem component. But when we are writing this.props.OnDelete it's taking its value from the props object from TodoItem component.

  8. Please note that video starts with…).bind(this), but lesson-8 git branch has no bind there. Eventually this ends up with 'TypeError: this is undefined' in your browser console, because <TodoItem> has no idea what 'this' is.

  9. @6:10 when your explaining the filter(), I think what you meant to say was that if item !== val returns false, then that item will be filtered out. Your doing an awesome job with these React tutorials, keep up the great work!

  10. My goodness! You're flying through these tutorials. How do you learn the material so fast, and have it known well enough to where you can teach others? I try to learn from books, when I do that it seems to take much longer, then I come to the videos which seem a bit clearer and less time consuming.


Please enter your comment!
Please enter your name here