React tutorial in Hindi #17 Handle Form | checkbox | input field | select

in this react js tutorial for beginners series we learn how to handle form data in react js . This video is made by anil Sidhu in the Hindi Language.
Playlist for complete React series in Hindi
link • React tutorial for beg...
code github.com/anil-sidhu/react-1...
Basic Form
Make HTML form
Add some field
Use state for field data
Submit and control form
Interview Question
Join on Insta @php.step.by.step

[@Ankitmathur_01]

Sir ap samjhate bahut achhe se ho and koi bhi part skip nhi krte. And app begining se leke chal rhe ho. Ye bahut achha lga mujhe. Dhanyabad

[@Viralvlogvideos]

I made a form with radio buttons,checkbox,select etc.. and also made clear button which will clear the inputs from frontend and also in useState sharing it so that other students can also refer: code: import { useState } from "react"; function App() { const [name, setName] = useState(""); const [term, setTerm] = useState(false); const [who, setWho] = useState("sigma"); const [what, setWhat] = useState(""); function formFun(e) { console.log(name, term, who, what); e.preventDefault(); } function clear() { setName(""); setTerm(false); setWho("sigma"); setWhat(""); } return ( Name: setName(e.target.value)} /> I Agree setTerm(e.target.checked)} /> who are you? setWho(e.target.value)} > sigma alpha omega noob What you do? code setWhat(e.target.value)} /> art setWhat(e.target.value)} /> Click Clear ); } export default App;

[@pratiksha2896]

Use alt+Z to wrap your code. You don't need to scroll the entire line of code.

[@rahul_singh_rajput3292]

Enjoying & understanding perfectly ✌.. Your explanation is Osm sir..

[@sushilkumar-ef7gh]

I recently got to know about your channel....you are simple awesome brother

[@Mrudula1416]

Nice and helpful to understand react for begginer user. Thanks

[@ashutoshsrivastava9807]

Njyoing your classes a lot...Thanks for Guidance

[@user-tg9nx2ij4o]

You are great teacher

[@mayurchaudhari4239]

Gazab sikhate ho yar aap sir man gaye apko

[@amitshinde4351]

Thanks sir, for helpful video

[@codestepbystep]

Most welcome

[@abhijeetnimbalkar9729]

Nice video and helpful

[@Aarna_kashyap]

Very helpful

[@viveksharma6230]

Will put the "disabled" attribute under the input tag

[@RajnishKumar-oj3vr]

Can we use only e.prevent??

[@reactjs4278]

Hello sir, how to clear data on form ??

[@patience_creator]

Disable with disabled key word. In input field

[@WanderingWieSuresh]

Abhi to humare pass 3 input the agar 20 honge to kya 20 useState banana padega

[@shilpasharma6894]

if we want to clear all the form field by clicking the Clear button as you have mentioned in the end of video. please help with its code for clear button.

[@shubhamgarg7]

You should try these points, I hope it will help you - (1) You can create a reset button jo aapke form ko clear krdega (2) Aap form tag mei jo Onsubmit function call kiya hai us function mei jakr wapas se values set krdo sbki fr jaise hi aap form ko submit kroge automatically form clear ho jayega kyunki aapne form submit krne ke baad sbki values fr se set krdi

[@FM001]

Clear

[@AbdulRehman-bd4mb]

sir without form kis tara data leta hian

[@ajitrana3158]

Sir how to clear data in form

[@shorttutorials205]

const [disableValue,setdisableValue] = useState(false); setdisableValue(true)}>Disable setdisableValue(false)}>Enable

[@sauravsubba9987]

Where is the questions and answers? any sepreate video?

[@DeepakGupta-hj2dv]

Form validation ka video bnao

[@codestepbystep]

Okay, aaj evng me bnauga

[@StudyAbroadAdventures]

Need help e.preventDefault is creating error plz help:) "Uncaught TypeError: Cannot read properties of undefined (reading 'preventDefault')"

[@StudyAbroadAdventures]

when I comment this, app running smoothly....

[@rajaasim4474]

e.preventDefault();

[@hades5509]

@@StudyAbroadAdventures use e.preventDefault()

[@harrypotter-ks5qj]

Sir aapne bataya nhi ki bina form ko use karae hum kaise data ko submit krenge aapne bola tha last me bataunga

[@AkanshaBhardwaj-fx2zr]

const [disableValue,setdisableValue] = useState(false); setdisableValue(true)}>Disable setdisableValue(false)}>Enable sir please check the code is correct or not..??

[@GIS-Engineer]

Console pe kuch nahi aa raha na ho koi error aa raha

[@AmanKumar-ps8th]

Bt how to print all data to screen Here, we only print it in console so please tell me👌

[@codestepbystep]

Just print state data. That's it

[@AmanKumar-ps8th]

import React, { useState } from 'react'; import './App.css'; function App() { const [name, setName] = useState(""); const [tnc, setTnc] = useState(false); const [interest, setInterest] = useState(""); const abc = (e) => { e.preventDefault(); } const a = (e) => { setName(e.target.value); } const b = (e) => { setInterest(e.target.value); } const c = (e) => { setTnc(e.target.checked); } return ( handle Form In React Select Options Marvel Dc Accept Terms and Conditions Submit ) } export default App; Sir this is the code and I tried bt it is not showing the data on screen so could u please tell me where and what to right in this code so that it works.

[@codestepbystep]

@@AmanKumar-ps8th {name} Aise use kro state ko, display ho jayega

[@AmanKumar-ps8th]

Sir yes this is working bt not on submit button . It is printing while u r filling the input box. For this i think we have to add onclick fxn in button

[@codestepbystep]

Yes, aap iss video se last wala video dekho, wha 1 flag lekr btaya h wo try kro aap

[@SUNNYVLOGS812]

what is e here?

[@Anonymous04254]

Sir, 9:05 Pe jo Awaaz aayi wo aapne kiya tha ya kuch editing error hua hai..?😄

[@codestepbystep]

ye bhai m soch rha tha kuch :D

[@divyanshsinghbhati6026]

😂😂😂😂

[@ManishaKumari-du4wf]

Sir console mai warning aa rahi hai : unknown event handler property 'onSumit'.it will be ignored

[@m.pcreations2122]

It's onSubmit not onSumit

[@ashok-bhaargaw]

Hi Anil, I have #Question. I created this form but when I checked the thems and conditions it showing me undefined. Why??

[@RadheyNameKaSahara]

Hi sir, Your voice is really soo sexy, this is a compliment don't take it wrong.😂

[@codestepbystep]

Hehe.thnx

[@dipukumar3472]

Sir aap ki insta id not found aa raha he