React Tutorial #8 - Handling Events

----- COURSE LINKS:

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

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

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

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

[thealgorithm_]

For those having the "'this' is undefined" error, here is what worked for me:

- In the constructor for the TodoComponent class:
this.onDelete = this.onDelete.bind(this);

- In the TodoItem class:
constructor(props){
super(props)
this.handleDelete = this.handleDelete.bind(this);
}

This is based on the latest documentation from React.

[PC-ubvz]

@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!

[staschernov]

Please note that video starts with todos.map(...).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.

[uhNid]

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.

[briantoon]

This was definitely the most complex video in the series thus far imo. I'm brand new to React so I was still pretty confused the first time around watching this particular lesson. My advice is watch it once and just follow along, watch it a second time and update your code while watching, and then once you get your code to work correctly watch it one more time.

Thanks Ninja!

[ak-loz]

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.

[golcuk]

Actually 6:37 it returns "true" because "!==" this statement meaning is "not equal" so "wash up" is not equal to "eat some cheese" so this returns true and that's why it is hold in array.

[atmuukjg]

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.

[tomaszkonecki]

Another great explanation. Thanks a lot!

[abhishekbapuove]

Hey, can you make a tutorial playlist on gun.js?

[MrVisheshsingh]

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.

[mishabandura]

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?

[Pravasith]

great work...! thank you so much for doing this

[jayn]

Seems like a lot of code just to delete an item out of an array doesnt it?

[ShakeCross]

What does .bind(this)); do in line 17? it is seen in 8:07

[ksk]

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.

[angelisasioyolo]

OMG, dude you are so fucking awesome!

[lsag]

i believe this could be done with jquery, with half the code. Could anyone tell me what the advantage of this method?

[CuongNguyen-xwqu]

Cannot set onDelete property of underfined :(