Custom Toggle Button in React JS and Console the State Value || ON OFF Button || React JS

hello everyone this video i will show you how to create a custom toggle button in react i already created a react project i included this app.css in app.js file okay inside the view i need to create one more div okay and here i need to add a class name is toggle okay i'm copying this and paste it here and this is this toggle button background color okay background color is red great i need to change this to this okay rgb color okay this is fine and also i need to add height height is 30 px and also with with this 60 px and border radius is 30 px okay save this i need to save this file also okay this is fine i need a space at top so i need to add a margin margin top okay margin top is 30 px yeah i get a space on top now i'm going to add one more do inside this two doors one is left left click and another one is right toggle okay here i get its name is last name is toggle left i need to create one more div its name is right okay and save this file i need to copying this and paste it after this here this height percentage at a height height is 20px [Music] with this also 20 dx and here in the toggle button i need to add display flex because i want that to do in one row okay flex and here i need to add a background color sorry background color is white and also border radius 20 px okay say this yeah this is fine i need a space set top okay so any margin sorry like modern yeah this is fine i need to copy this and paste it for one more time yeah i need to change it into right yeah this is fine here to do so display i need to display only one at a time but first click if i second time click right side will show the time click first time first we will show okay now i need to add on click to this view and click this and then click ok i need to copy this and i need to add on blue state okay state name is toggle toggle button here set set toggle button use state initially i want to state at false okay and this is fine i need to add handle change that's it so function handle same okay here yeah this is fine and initially i need to show left side okay so i need to add used set state okay by copying this and paste it here every time i need to change the state into true and false true false okay save this i'm going to copying this and i'm going to add a ternary operator okay in first click i show this div second click i need to show this to okay i save this file yeah here i refresh this yeah this is fine if i click it's not changed why why it's not change toggle button everything is fine it's not displayed actually it's false right you need to copy this and try to see the toggle button state value okay save this file and i need to inspect this console log okay if i click this button initially it's false and it's true but both are in the same place okay because i give both the dues are in same place okay so i need to add a margin it's 5px at top right is 5px and bottom is also 5px and left is 30px save this yeah this is fine i need to move little right okay so top right i need to remove just two and also this is 33 sorry 35 yeah 35 is okay i refresh this page if i click it's back to left right left right and also the state value is changing right yeah this is what i try to tell in this video i will see you next video bye you

Channel: Coding Comics

Views: 2,889

Keywords: toggle button in react js, on off button in react js, onclick toggle in react js, toggle button with onclick in react js, on off button in react hooks, toggle state in react hooks, react on/off button, toggle state in react functional component, toggle hook react, usestate toggle boolean, how to toggle in react, toggle button true false in react, button click in react js, div onclick in react js, toggle button react, custom toggle button in react js, custom toggle button, react

Id: SGO53lCDP88

Length: 7min 16sec (436 seconds)

Published: Fri Apr 08 2022