3.8 Challenge: Refs Research

It's time for another challenge and this one is a little bit different. So what we have here is the same program that we had last time. Where we can put a new user's avatar into our text box here and click get avatar and we can see their avatar shown above. However, we need to change this so that it's more up-to-date with React best practices. Notice the text here. In this program, we're setting the ref property with a string value. And you'll remember that we're doing that here on our input element. Input has a ref equal to input. So ref is a string value. This is not a good practice in React anymore and support for it maybe removed in the future. So your challenge is to find what the new best practice for refs is and change this code to use that best practice instead. So this involves probably going to the React documentation and doing a little research on refs. So, if you want to go ahead and pause this video and figure that out for yourself, you can do that now. I'm gonna go ahead and fork this code, which you can find the link for underneath this video, and I'm gonna show you my solution. So, it's actually pretty simple. Instead of having a string here, what we can do is pass a callback function. And this callback function expects to receive as a parameter an element. This is the DOM element that our input component here will create in the DOM. And so now, we can do whatever we want to for this DOM element. Now in a case like this, when we need to refer to it from somewhere else. We don't actually really wanna use it that much inside this callback. Remember we have to use it up here in handleClick. The old way of doing this would be with ReactDOM.findDOMNode and passing it to ref. Then the next way of Reacy was that this.input.refs would actually return that DOM Node and we could just do .value, like that. However the better way to do this is to assign our element to its own property on this object. So what that means, if that sounds a little vague, is we can do this.inputEl equals the element. And so inside this function we just assign to this .inputEl and add it as a property on the instance of the React class that we have. Then inside handleClick, we don't need to do anything fancy to get it. All we have to do is change this to this.inputEl.value. If we want to empty it, we can say this.inputEl.value is an empty string. So let's see this in action now. If we go ahead and do tutsplus and I click Get Avatar, you can see that we switch the avatar. Because we can get the value of that text box through this .inputEl. And we actually empty the text box because we can do the same thing by setting the value. This is the new best practice for working with refs in React. Instead of setting your ref as a string, what you can do is pass a callback function that receives that DOM Node as its property. If you wanna use it right within here, that's fine, you can go ahead and do that. Otherwise, you can assign it to a property on your class instance and use it from other functions as you need to.