This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Context" Lesson
[00:00:00]
>> Brian Holt: So one more thing, now we have photos, which we know is going to be an array of photo strings, okay? Now we just have to make this handleIndexClick function.
>> Brian Holt: So, let's go ahead and do it this way first, we're gonna build it wrong first and then we'll show you how to make it right.
[00:00:21]
>> Brian Holt: Okay, handleIndexClick, this is gonna take in an event of some sort like this.
>> Brian Holt: And here we just wanna call this.setstate, with active being the event.target.dataset.index
>> Brian Holt: So there's two things wrong with this, let's talk about both of them. The first one, if you've never seen dataset before, this is not a react API, this is a dumb API, right?
[00:00:51] And dataset allows you to get two things that are on the data, on the each note tag, right? So I had this image tag here right, and I had this data index. So this dataset that we're referring to, let's close you. [BLANK AUDIO] There we go. So dataset index, that's going to refer to whatever is here, right?
[00:01:16] So it'll have zero, one, two, three and four in there. That make sense? But the thing to keep in mind here is active needs to be a number because we're using as a number down here, right? Anything that comes react from the dumb is always gonna be a string, so we need to convert this into a number, we need to coerce this into a number.
[00:01:37] There's a number of ways of doing this. You could do parseInt or something like that, or you can just say Plus. If you put what's call the unary plus right there, that will turn it into a number.
>> Brian Holt: Okay? So that's problem number one solved. And I said this, sorry, this.setState right there, that's a third problem.
[00:01:59] [LAUGH] This.setState. The other problem that we have here is what is this? So, if I'm calling it as an event listener down here, what do you think this is gonna be here?
>> Speaker 2: Download?
>> Brian Holt: I think it's nothing. I think it's undefined. You're on the right track that it's not correct, right?
[00:02:28]
>> Brian Holt: We need it to be the component, right? We need it be the carousel component because we wanna call a setState on the carousel component, and this is either Window or I think it's undefined. I think react makes it undefined. Regardless, it's not what you want it to be.
[00:02:45] So how would I make this correct? There's two methodologies here, I'll show you both of them. If I had a constructor up here, so just say I had constructor (props), and you don't have to copy this one, I'm just showing you this one, super(props). What you could do here if you don't have public class properties enabled in your project which many of you will not.
[00:03:10] You can come in here and put, this.handleIndexClick=this.handleIndexClick.bind(this). This looks ridiculous, right? But what is this actually doing, right? It's binding the context of handleIndexClick to be Carousel, because we know what this is inside the constructor would guarantee it's gonna be the correct context, right? So this means that handleIndexClick can then be called, and this will always be correct, right, so this works.
[00:03:40] There's an even easier way to do this, though, if you have public class properties like this.
>> Brian Holt: I can just turn this into-
>> Brian Holt: An arrow function.
>> Brian Holt: Now it's correct again, right? Because we talked about arrow functions, right, they don't create new context when they're invoked, which means that it gets it lexically, which is not actually technically correct but effectively is correct, right?
[00:04:07] So this is determined when you write it, right, so this is going to be wherever it was written. Whereas if I you call a function like this function here, right? It's going to be whether it's invoked, now recognize it's probably not a kind of an odd distinction to make but suffice to say, this will have the correct this because this event listener's not gonna create a new context.
[00:04:30]
>> Brian Holt: So I'm gonna give you just kind of a rule of thumb here. Whenever you are passing functions down into children, right? Or whenever you're doing event listeners, use an arrow function,
>> Brian Holt: Because that will guarantee what this is to be is correct. Like notice here in our componentDidMount in details and this one, notice that we didn't have to do any magic for this.setState for componentDidMount that's because componentDidMount, we already know it's gonna have the correct context.
[00:05:02] Same thing with render, render is always gonna have the same correct context. So it's really just event listeners and functions that you're passing into children, that's it.