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

Basic Form
Make HTML form
Add some field
Use state for field data
Submit and control form
Interview Question

[Ankitmathur_]

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 (
<>
<form onSubmit={formFun} style={{ marginLeft: "35%", marginTop: "10%" }}>
<label htmlFor="name">Name: </label>
<input
type="text"
id="name"
name="name"
style={{ background: "yellow" }}
onChange={(e) => setName(e.target.value)}
/>
<br />
<br />
<label htmlFor="terms">I Agree</label>
<input
type="checkbox"
id="terms"
name="terms"
value="agree"
onChange={(e) => setTerm(e.target.checked)}
/>
<br />
<label htmlFor="whoareyou">who are you? </label>
<select
name="whoareyou"
id="whoareyou"
onChange={(e) => setWho(e.target.value)}
>
<option value="sigma">sigma</option>
<option value="alpha">alpha</option>
<option value="omega">omega</option>
<option value="noob">noob</option>
</select>
<br />
<p>What you do?</p>
<label htmlFor="code">code </label>
<input
type="radio"
id="code"
name="whatyoudo"
value="code"
onChange={(e) => setWhat(e.target.value)}
/>

<label htmlFor="art"> art </label>
<input
type="radio"
id="art"
name="whatyoudo"
value="art"
onChange={(e) => setWhat(e.target.value)}
/>

<br />
<br />
<button type="submit" style={{ background: "green" }}>
Click
</button>
<br />
<br />
<button onClick={clear} type="reset" style={{ background: "skyblue" }}>
Clear
</button>
</form>
</>
);
}
export default App;

[sushilkumar-efgh]

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

[Mrudula]

Nice and helpful to understand react for begginer user. Thanks

[rahul_singh_rajput]

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

[pratiksha]

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

[ashutoshsrivastava]

Njyoing your classes a lot...Thanks for Guidance

[mayurchaudhari]

Gazab sikhate ho yar aap sir man gaye apko

[WanderingWieSuresh]

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

[viveksharma]

Will put the "disabled" attribute under the input tag

[reactjs]

Hello sir, how to clear data on form ??

[AbdulRehman-bdmb]

sir without form kis tara data leta hian

[shilpasharma]

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.

[StudyAbroadAdventures]

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

[patience_creator]

Disable with disabled key word. In input field

[sauravsubba]

Where is the questions and answers? any sepreate video?

[atulkumarsharma]

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

[harrypotter-ksqj]

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

[AkanshaBhardwaj-fxzr]

const [disableValue, setdisableValue] = useState(false);
<input disabled={disableValue} type="text"/>
<button type="button"
<button type="button"

sir please check the code is correct or not..??

[AmanKumar-psth]

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