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/ani...
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

[@pratiksha2896]

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

[@shorttutorials205]

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

[@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;

[@RadheyNameKaSahara]

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

[@codestepbystep]

Hehe.thnx

[@AkanshaBhardwaj-fx2zr]

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

[@amitshinde4351]

Thanks sir, for helpful video

[@codestepbystep]

Most welcome

[@WanderingWieSuresh]

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

[@rahul_singh_rajput3292]

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

[@gauravverma4077]

Thanks sir to learn React

[@sushilkumar-ef7gh]

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

[@viveksharma6230]

Will put the "disabled" attribute under the input tag

[@atulkumarsharma489]

Value= name wala nhi aya smj me ky kaam kr rh hai

[@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()

[@patience_creator]

Disable with disabled key word. In input field

[@Mrudula1416]

Nice and helpful to understand react for begginer user. Thanks

[@ashutoshsrivastava9807]

Njyoing your classes a lot...Thanks for Guidance

[@reactjs4278]

Hello sir, how to clear data on form ??

[@mayurchaudhari4239]

Gazab sikhate ho yar aap sir man gaye apko

[@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

[@harrypotter-ks5qj]

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

[@sauravsubba9987]

Where is the questions and answers? any sepreate video?

[@GIS-Engineer]

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

[@ajitrana3158]

Sir how to clear data in form

[@SUNNYVLOGS812]

what is e here?

[@AbdulRehman-bd4mb]

sir without form kis tara data leta hian

[@PranshuSingh-g6p]

You are great teacher

[@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]

😂😂😂😂

[@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

[@abhijeetnimbalkar9729]

Nice video and helpful

[@RajnishKumar-oj3vr]

Can we use only e.prevent??

[@Aarna_kashyap]

Very helpful

[@DeepakGupta-hj2dv]

Form validation ka video bnao

[@codestepbystep]

Okay, aaj evng me bnauga

[@ashok-bhaargaw]

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

[@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

[@dipukumar3472]

Sir aap ki insta id not found aa raha he