Toggle Button Text On Off in ReactJS State | React JS Tutorial

what's up guys what's going on my name is  Hiroshi from WebStylePress.com and welcome   to another video if this is your first time here I  can boost up your design and soft transient skills   by sharing tools and my coding experience so if  you want to learn and grow in this area join this   channel by hitting subscribe button and bell icon  doing small stuff with react.js is very easy small   things such as changing state and elements on  the screen is a breeze in this video I will show   you how can you change the text off a button by  clicking it by using ReactJS if you want to change or   toggle a text of a button by clicking it one way  is to set this state for this button clicking on   it will toggle the state on or off and you can  change text based on the state in the exist we   use state lot state is like a temporary memory  for holding small pieces of information that   can be used across your application whenever  you need it here is how this is a basic deck   just project let's start by changing the default  page and this is the default page that read just   boilerplate gives us and let's start by changing  the default page and adding it button to it and   then we will add state for the button to change  text in the button we do not need this header instead we need a button  here so this is our button let's tie this button this is our app  dot CSS and let's give it a nice style adding some background color some border-radius  save it and this is how it button maybe a little   bit margin from top and let's increase  font size let's save our turn so here   this is our button and I want to click on it  and change the text inside it so if this is on then I will click add this button it will display  the text off and then it will be off and I will   click at it and it will show they text back to on  to try get that functionality I need some kind of   event and link and I need some kind of trigger  and that is on click and as you can see here   in HTML Rios this on click event handler like  this but in react years we use capital letter   C in camel case on click and then a function name  inside brackets so let's do this on click inside   the bracket here is my function this dot click  handler or let's change the name to handle click   this name can be anything so this is my function  let me come back to my page and let's save it   and if I click at it nothing happens now I will  have to add functionality to it so I will place   this click handler here and this is my function  then I will click add this button this function   will be called and inside this function then I  click at the button I want the state to change but for that I need to add this state to  this component first so let's add this state constructor props super props and this is  our state this dot state would declare this   state like this and then I will add and identify  inside it is toggled on true this is a boolean   value it can be false it can be true we will  turn this to false and true and then it will   be true we want to display on here and when it  will be false we want to display off here at   the button so our state is done and let's add  functionality to this click handler all right   so I will click add this button and this click  handle will will be triggered on click and here   are the instructions to change this state  and essentially I will do it like this if   the state is false it will be true and if it  is true it will be false so this dot set state state is toggle on I will refer to my  reference in this state and here will   the State DOT is toggle on but I will use not  operator here and what is it not operator it is   a logical operator that says returns false  if it's single operand can be converted to   true otherwise returns true I will use this  logical not operator all right so it says   that this dots at state that is is toggle  on you can use any of the name instead of   is toggle on it's up to you totally up to you  and its value is a boolean value that is false   and if it is false then turn it into true and  if it is true then turn it into false simple okay by clicking at the button we  encounter an error that is because   we did not bind this click handler we  have to bind this we have to bind each   event handler in the constructor area  here so this dot handle click this is   my function I am binding this function is  equal to this dot handle click dot bind this save it and trust me button again now the state is changing let me show you where if I go to components for this page and  let me go to the component again at this   section and then I click this button you  can see that it is showing this date is   changing here is toggle on true/false it is  changing so all I have to do is to display   in my page so let's do that so how can we  display this state will use this state in   the page we can display it like this this  dot state dot our identifier name let me   add a break after the button and let's save  it and we still don't see anything here boy well because we had to use a tag and enclose  this text inside that tag still nothing that   strange so it turns out that it is a boolean  value it won't be displayed we will have to   use some kind of check or expression to  check whether the value in our state is   false or true and then based upon that then  you'll we can select to display something   at the page so let's try it out so this is  the check this statement right here contains   our state value but it is not displaying  so we will use a ternary expression here let's save this page and here is the value and as  you can see when I click on this button the value   changes let's move this expression inside this  button instead of this static tag text on we can   use this expression inside the button let's save  it and let's check how it's like so it is it is   toggling it is turning on and off so what did I  do here so these brackets right here this is the   exists and you are looking at the tags here such  as and return and you can choose your paragraph   but you are writing GSX here you are writing  JavaScript if you want to display something here   you will have to use the tags and something inside  those tags but if you want to show some kind of   result or something then you will use these kinds  of brackets and it will and you can use JavaScript   or expressions inside this these brackets so  that's what this is and this is this right   here question mark and this sign is it is it is a  condition at a simple affairs condition condition   expression if true or expression if false if they  can do if this is if this condition is true if it   will find the value true here it will display  the value right after after the question mark   and if the value is false here it will display  this value this is if if this is true then show   this one or if it is false then show this one  simple and you can display this thing that has   many times as you like in this component and it  will display without any problem another we are this one and this one and another one save and here all the values and these are all  changing you can display this button this text   inside the button or you can display this  changing text or toggle activity outside of   this button it is alright so we do not need this  okay pretty simple right so we used a button and   we applied on click event handler add the button  and then we used a function to apply our logic to   this and in inside our function we instructed  this application to set this state to true if   it is false and false if it is true and this is  our state declaration our identified was this   and this is a boolean value remember this  is a boolean this is not like this this is   not a string this is a boolean value it will  be false or it will be true and we are turn   negative also if it is true and true if it is  false all right and then we are displaying it   by using this expression the simple expression  here if else expression short form of if-else   expression if you will and this is our check that  if the value in this state is true then show on   text on this is simple string this can be anything  this can be anything and as you can see here right   or in other case if it is false then show the off  and this is our simple page with a single button   that toggles some text added and another thing if  you do not want to bind this function this click   this function you will have to bind each function  that you will create if you don't want to do that   then there is another way to do that you can  just use arrow function and it will work fine so it is working but if you don't  use that arrow function and don't   bind this function then it won't work on  click you will get another you will have   to bind this to make it work or you  will have to use this arrow function pretty simple right so it is very easy to toggle  things on/off or changing the state by using that   state thing in the radius do you use the exists  let us know if you want a similar tutorials I   hope you liked the video if I missed anything or  you have something to add to this you can comment   down below ask questions related to this topic  if you haven't already subscribed subscribe to   this channel and hit Bell icon to the C channel  updates join us on social media links are in   the description below stay tuned for coming  updates and I will see you in the next video

Channel: WebStylePress

Views: 19,532

Keywords: react toggle button state, toggle text react js, toggle button text, react toggle state, text on off, toggle button react, reactjs toggle button, toggle state, use state to toggle, react, reactjs, javascript, reactjs state management, custom toggle, using react js state, react tutorial, react js, react and node, hide in react js, react and node js, hide show in react js, react js tutorial, react js example, react javascript, react web developer, React tutorial for beginners

Id: AR8rAtyZ9N4

Length: 19min 40sec (1180 seconds)

Published: Mon Dec 30 2019