Main

Switch Case in React - 32 - React JS Tutorial #react #reactjs #reacttutorial #switchcase

Switch Case in React - 32 - React JS Tutorial #react #reactjs #reacttutorial #switchcase Conditional Rendering : https://www.youtube.com/watch?v=KtoPlMvWzEE Render Props : https://www.youtube.com/watch?v=WR4lxMFjuiw Render List : https://www.youtube.com/watch?v=5arcJlMocLg State : https://www.youtube.com/watch?v=-4V2WQ6OneM&t=16s Props : https://www.youtube.com/watch?v=qEHZsCUVU0o Coding Links below: Switch Case : https://github.com/rseetechofficial/react-switch-case Rendering : https://github.com/rseetechofficial/react-rendering #reactapp #createreactapp #reacttutorial #react #reactjs #github #git #githubpages #axios #api #coding #html #html5 #css #css3 #javascript #typescript #nodejs #expressjs #fresher #interviewquestions #htmltutorialinhindi #csstutorialforbeginners #csstutorialinhindi #reacttutorial #nodejstutorial #javascripttutorialinhindi #javascripttutorials #frontenddeveloper #backendwebdevelopment #codewithharry #javascriptmastery #webdevsimplified #technicalsuneja #rseetechofficial Namaste Frontend System Design šŸš€ | Fundamentals, LLD, HLD & Interview Questions props and state in react js, usereducer react hook code step by step, conditional rendering in react, react hooks tutorial, functional components in react js, useref hook in react js in hindi, usereducer, react latest tutorial, react features, react useref, synthetic events in react js, props in react js in hindi,

RseeTechOfficial

4 days ago

Hello guys, I am back once again with a new video for you, so today what you are going to see is how to use your switch. If you are going to see how to use your switch, then let's start. What am I going to do on y What am I going to do on y What do I need to make a switch case y Here first of all I will create a component here. Here the component that I am going to create I have created a component called Switch Case y Okay , I created it with the name of switch case and I created a file named s
witch KGS here inside SRC, I also create the component, so this is what I created on this, okay now. I have created a component and I export it on Y, I have made it the export default. Okay, in the switch case, I have done this on Y, and here I import it, so I have done this, now in which I don't have to take anything. So I come inside the case at Apna will have a use state, okay, I have put the use state here and after that I came to Y and inside this Apna Ko, inside the switch case, what do I
have to do, I am creating a variable from Y here, what am I doing here. I will create some radio buttons on the radio and select them, then you will see that selected option there, which one you have selected. Okay, so I am going to make an example about that here, so I have made this selected option. And here I do set select option is ok here set and capitalized it I am equal to here I have used state ok I have done this use state is ok here and inside this simply my If you want to add value th
en option, I will create two or three options here, so I put the default value here, option one, okay, so I put this option one here, okay, now what do I do, okay, I went inside it and here I create. I am a function, okay here, handle them up, if we make them an option, then the option that will be created inside the radio button, okay, then to handle that, we will do this, our, so the option change is equal to, here, okay, so this has become our function here now. There is nothing inside this b
ut I wrote the return statement okay now inside the return see what I am doing here but I created a day inside this day first I would create a heading open switch its so switch case end okay so Now after that I do the break line here, okay, here I do the break line twice, then I make here A3 OK, inside A3, let me tell you the select option, I will select the select option here, whatever I select, I will make it here. I will show the select option here, okay, now it's done here, okay, after this,
now I go back here, give a little break line, okay and after that I start creating my own dev from here, okay, let's create this dev. After I do here, label is ok, this is the label and inside this label, I create the input input, what is my type, type radio, ok, type my radio, the value here is the value, I am in the string here, option option one. Done, okay, what do I do inside the check checked, selected option I is equal to equal to y, but option one is okay, so this will be selected, okay
and if here now I have to do it, here I move it down, okay . If it will be easy for you to understand, then I do it like this. Okay, so now I do the on change function here. Okay, and inside this we will call our function handle handle option change. And from here I will send what value option one y will go to option one okay and inside this our So this is our input here I closed here I closed the input here and here I wrote option one okay so this is our one The label is fine here, in the same
way, if I want to create two more three levels, then I am copying this one, this becomes my second, this is the third one, okay, so here I make it three, inside the value also three . Here too, three, okay, this is our and value option. Here also option two will become option two, here p option two and this p will also become value option. Okay, this will become one okay, so this is it. I have gone till here, OK, the inputs are done, now these inputs are done, now what do I have to do here, swi
tch case. I have to put it right, so what will I do here for this, now this is my dave, what to do outside this dave, created a dave here, okay, here I make a break line, if it looks a little right, then I made this break line. And inside this test, now I have to put the switch case. Okay, so I start from here. Switch case, so what am I doing inside this ? I did the switch and inside this switch the selected option OK and on the selected option y the case will now be made from case y to so insid
e the case option one right from here option one will be made and if I want to return here then return what I have to do here one I make H four, I will return to my own inside A4, so here selected select switch option one, okay, now I want to do all the cases like this, so what I do here is copied this, this is my second third. And this is mine here, okay, so this is mine, second, so the second one will come here too, this is my third , so it will happen here also, third, okay, so this option is
not tooth and this, whatever happens, will be yours here. By default here, I do this default option will come, here what will I do in return, I will tap return on Okay, so this is what I have done on my screen and now I go inside the browser and see here I have created this option, okay, so now I go to the second page, sorry, why is it getting selected? Now what do I have to do here? Inside the handle change, when I change the handle, the option that comes here is the new option here. Okay, wha
t do I do with this new option? Here, select or set the selected option. What will I do inside here, I will update this new option here, okay, now I go inside the browser and see what is happening here, now see this option here, see here. The selected option is being changed here, right, so in this way you guys can change the option here, now see what I did here, this is coming here, this is also coming, otherwise, what is happening here? No, this is what is happening here, this is what is the c
ontent written inside the switch, what should be the return here, so what do I have to do for that here, I did this here, it is ok so Will come inside this function and here it will return the value. Now look here at the option here, which one is selected, here too, here at both the top and bottom places, you can see it is changing equally right. So in this way you guys can change the option here. If you read the basis of switch keys then this is the example of switch key. Thank you guys and tod
ay's topic ends here and see you in the next video with a new topic. And if you guys have not subscribed my channel yet then please subscribe my channel and turn on the bell icon so that you guys can get my video first.

Comments