Manipulating the DOM In ReactJS | useRef

[Music] hey guys how's it going i'm back here with another video and today i'm going to be talking about dawn manipulation in react so this is something that a lot of beginners wonder on about because basically when you work with javascript before working with react you're very used to literally directly manipulating the dom so for those who don't know the dom is the document object model it is basically a huge object containing all the different html elements in the page so basically html is just just imagine it as an object containing every single element and their actions their functions everything related to each element in your page right so with javascript you can just access that object and you can manipulate it by changing its properties also adding more elements to the objects also doing like doing all that kind of stuff right however when a beginner who've never used react before start using it they'll get really confused because they'll try to manipulate the dom directly and they'll find it to be weird and then you they'll read a bunch of articles talking about why you shouldn't do this and that that's actually true in react it is a really bad practice um to to manipulate the dom directly and the reason for that is because react was built primarily just to solve that kind of issue react was actually built to make it easier for you to maintain your your dom in the same state as your application so why would you directly like update the dom uh when you can use all the different hooks and all the different aspects of react to do that for you so that's actually why you shouldn't actually manipulate the dom there's many other reasons too it also makes the application look messy so if you're a beginner and you're watching this video i'm going to show you guys if you really really need to manipulate the dom i'm going to show you guys how to do that and also why like what you can do um to replace certain things like if you want to create an element or you want to change for example the class name of an element i have here opened a simple a javascript project this isn't react this is normal javascript and you see that many times we access the element and just change its class name or change its inner html and we don't do this in react and i'm just going to go over how you can do this how you can fix this kind of stuff and we're going to be talking about a hook and react which is really common called the used wrap hook i'm also going to explain what it means and how you can use that when you really need to manipulate the dom okay guys so let's actually get into kind of the tutorial and i'm gonna actually build here an example to show you guys one of the basic like very beginner um examples to why like how you can manipulate the dom without actually accessing it and i think that this is a great example because it will show you guys how to use states and why they are really important to actually fix that issue that we talked previously so this is a very simple react application there's nothing other than just this app.js and an app.css what it did is i basically just created a div over here it has a class name called circle and i have a button called changed to shape actually that makes no sense wait just change shape like this and we have an app.css which contains two divs like two classes right here the circle class which just creates a circle as you can see and the square class which just creates a square and currently you can see that we have a circle in our screen and we have this button called change shape so basically what i want to do is i want to be able to click on this button and change this if this is a circle change this to a square and if this is a square when i click on this button i wanted to change it into the circle so how exactly do i do this like i have this class over here called square and i have this class here called circle like if i manually change this to square you'll see that um over here it will become the square but i need to manually change it right so how do i make it so that um it will do this automatically when i click on a button and if you've worked with javascript before you'll know that um this can be done by just as i mentioned before accessing the dom and just manually changing the class name for this um to to square if you're in circle and to circle if you're in square but you don't do this in react the reason why you don't do this is exactly what i talked about previously and also because there's a much easier way of doing this by using the use state hook so if you're a beginner um this is a this is a very important hook is probably the most important one um to access it you have to import it so you can just come here at the top where it says import react you can just put a comma or and just open up the square brackets and say use state you'll import it and here at the bottom you can just create a state a state is just a variable that when its value changes it will automatically trigger a re-render of the page so that it shows the new value for that for for the variable right so that's extremely important because um if you wanted to like it can be used in many different situations right but in this case specifically what we want is we want to create a state which is going to represent if it is a circle or not it's going to be a boolean called is circle and basically it will start as true because our class name should be circle and what we're going to do is we're just going to say that we want our class name to be circle when is circle is true and we want if it isn't true we want it to be square so that logic can be very simply done by creating the state here called is circle and with states we have to pass here as well a function that changes that that that state so set is circle and it's going to be equal to use state and it's going to be a boolean which is going to start as true right so initially we want it to be a circle so instead of just writing the class name over here what we can do is we can directly use the the logic like or use the variable over here the state and just ask okay well if this is a circle so if circle um no not if circle is circle um we want to ask if it is then we want to put a question mark and just pass okay i want the class name to be circle if it isn't we want the class name to be square and this logic over here this is common in javascript um you're just saying that we're going to update this depending on the value of the circle and on the button here we want to basically just add this and on click event and inside of here we want to pass a function which is going to set a circle to not a circle and if you're a beginner this might seem confusing but basically what i'm doing here is imagine in the beginning it circles true right so if it is true we want the class name for this div to be circle and if we click on this button it's going to set the value of this circle equal to the opposite of its current value so its current value is true it's going to set it equal to false and now it's a square and if we click again it's going to become true so now it's a circle this is the kind of logic that i'm talking about and by the way this isn't a tutorial on new state so if you're truly a beginner and have never used the estate before i recommend i have other videos on it so i recommend watching those first so now let's test this logic by looking at our application you can see that initially it's going to display the circle because we wrote this logic to show um if each circle is equal to true which it is initially we want to display the class as circle but when i click on this button you'll see that it now becomes a square if i click again it becomes a circle and i'm literally manipulating the dom in theory i'm changing the dom's values and changing the class names of the dom elements however i'm not directly accessing the element like you would do in normal javascript and this is the beauty of of react and you can see it's really simple like if you're a beginner then this might seem a bit weird like a bit at the beginning however this you'll get it really fast because it is a very simple logic compared to what you usually have to do when you're using normal javascript however this might not be the case in every single time right there you might need to access the dom like in some specific cases right so what are those cases well a very important case in my opinion which i find a lot of people asking me about um how do i do that and how like how would i approach this in a real application well this example is when you have an input and you want to click on a button like to submit that input to a form or something like that and when you click the button you want to clear the input right you want to basically erase what was previously written on that input so let's actually do this i'm going to erase everything with tensorflow and i'm going to create here an input of type text like this text and i'm just going to put a placeholder here and say something like write your name it's gonna be like an input where you write your name something very simple and we're gonna have a button over here which is just gonna be something like submit and i'm going to kind of like let's take a look at that it's over here as you can see i'm going to increase their size very simply by coming here and i'm going to delete this css i'm just going to say something like input i'm going to give them a width of like 200 pixels and a height of like 50. this is just so it looks a little bit better but you can see right now that we have our input over here and we have our button right and the idea is we want to write something over here like we would normally write and when we click on the submit button it will automatically clear everything that was over here and reset it to how it was before right so how exactly do we do this we can't just access we can do this with css i believe um so what what would actually be the the normal approach would be to use a hook and react called the use ref hook and this hook is very simply used to access mutable objects which include the dom so basically you can just set a reference to one of the elements in your react application and you can manually edit its elements by just accessing its refs current and i know that that seems weird but i'm gonna explain you guys what this means as we get into working with this um this hook so to do that we're going to come over here and we're just going to import the use ref hook like this and we're going to just be basically going to create we're going to use this to basically create a reference to one of the elements in our page and then we're going to set the reference inside of the element and i know that sounds weird but we're going to just start over here so you guys can get it while we code so basically we're going to have to create a variable here which is going to be basically a reference to one of the elements so let's just call this name input you can call it whatever you want but this over here will be an object representing a mutable object representing this input right here so we have to set it equal to use rev and over here we can literally just put anything i'm gonna i like put putting null um it's just we don't have to actually set anything here but you just put you can put null which is which which is actually what i usually do and it won't make any difference so we just set a name input variable to be equal to a reference object so now we have to reverse this object somewhere in our application so we do this in inside of the actual element that we want to set this object equal to so basically here in the input is the actual element we want to reference so inside of this we can just pass a property called ref and pass the name input variable over here so we're name input and now whenever we access this name input throughout the whole life cycle of our application we're gonna have the reference to the input that currently exists in our application so this is great because now in our on submit we can basically just access this um this name input whether where like however we want to so what i'm going to do is i'm actually going to create a function here called clear input and it's just going to be a very simple function like this and i'm just going to call it whenever we click on the on the submit button right so in the clear input we're gonna access the name input and inside now that we have access to this reference we can now access its object by just accessing the current so current basically means like you're accessing the current object that like the current properties of that referenced object so this is a great way of doing this you can just come over here and access all the different html elements that exist in that element and end up in that object right so and if you really want to check to see exactly what we can do with this we can actually just console for now just console log the the actual element to name input dot current and what this will do is it will just counter log all the different properties of the object that we can actually mutate so that's great let's just come over here let's open our console log like this i'm just going to clear it and let's click on submit and you can see that now we have this input right here actually wanted to access the like the object in itself but you can clearly see that when we click submit it's making a correct reference to the input right we're console logging name input.current and it means that since it's showing the actual input it means that it's working we're actually creating a reference so what exactly can we do with this well let's try to access something like um the inputs value right because remember an input has a value and the value for that input if you know javascript know that um each every input has a value and the value is actually this right here that we that we're writing so if we're trying to access this let's check to see if if it actually correctly console logs the what we wrote over here so i wrote pedro let's click on submit and let's see if it will console log pedro and you can see clearly it's actually accessing the actual value so that means that if we want to clear this input all we have to do is we just want to come over here and say name input so name input dot current dot value and we want to set it equal to an empty string and that's great because now we can just come over here and i want to write my name like this and when i click submit you'll see that it will basically just erase everything because it's mutating the object that we referenced in the beginning so this is basically how you use the used wrap hook to manipulate the dom and i would recommend it like i don't think you guys should if you're a beginner and you're wondering okay i want to follow best practices just know that um in most cases you can solve stuff without using um without actually referencing to an object but in cases like this um it might be a good idea to do it but just keep in mind that always try to find ways of doing it without actually manipulating the dom directly and you'll see that the react gets a lot easier it gets a lot easier than than normal javascript it is a better um developer experience and it's just a way to understand how to manipulate your project and actually build your application so that's basically it for this video sorry that i didn't post on monday um actually i just arrived in canada for those who don't know i study here in canada i hadn't been here for the past like 10 months and now i'm back at my university and i don't even like i'm just like packing stuff i'm i don't even know where i am but basically it's been like um a lot of work so i'll be back um like friday i'll post again i'll be back in my regular schedule this week and yeah i really hope you guys enjoyed this video if you enjoyed it leave a like down below and comment what you want to see next subscribe because i'm posting every single week three times a week and i would really appreciate it so yeah hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 8,286

Keywords: javascript, learn reactjs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, react js crash course, react js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, dom, document object model javascript, document object model, reactjs dom, dom in react, useRef, ref in react, useRef hook, react dom manipulation, change dom in react, document in react, react tutorial for beginners, dom manipulation, web development

Id: 8YNeCyQtPo0

Length: 16min 9sec (969 seconds)

Published: Wed Feb 03 2021