Forms in React JS in Hindi | React Controlled Vs Uncontrolled Component in Hindi in 2020 #34

Поделиться
HTML-код
  • Опубликовано: 1 дек 2024

Комментарии • 160

  • @ThapaTechnical
    @ThapaTechnical  4 года назад +10

    ➡️ Hooks in React JS in Hindi | useState in Hook in React JS: ruclips.net/video/SS1I7m-G2kk/видео.html
    ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: ruclips.net/p/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ

  • @kumarshantanu9430
    @kumarshantanu9430 3 года назад +50

    CSS :
    *{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    background-color: #d2dbdd;
    font-family: sans-serif;
    }
    div{
    width: 100vw;
    height: 100vh;
    background: #8e44ad;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }
    h1{
    color: white;
    background: transparent;
    text-shadow: 0 2px 2px black;
    }
    input{
    width: 50%;
    padding: 10px 20px;
    border: none;
    outline: none;
    margin: 20px 0;
    text-align: center;
    }
    button
    {
    line-height: 24px;
    padding: 0 20px;
    background: #9b59b6;
    color: white;
    border: 2px solid #ecf0f1;
    outline: none;
    border-radius: 5px;
    text-transform: uppercase;
    cursor: pointer;
    }

  • @its_sanjay06
    @its_sanjay06 4 года назад +7

    your css is OSM and thanks for this amazing playlist 👍👍👌👌👌

  • @NikhilSingh-us5se
    @NikhilSingh-us5se 2 года назад

    ap bhaut acha pdha te ho jiska basic bhi clear nahi hai uska bhi dhyan rakhte ho really helpfull sir love from utta
    rakhand

  • @rakeshsahani3805
    @rakeshsahani3805 Год назад

    Thapa dai ho k ..jasle garda ma fullstack developer ko journey maa ekdam help paye ...thanks a lot bro

  • @suresh.suthar.24
    @suresh.suthar.24 2 года назад

    Sir jo aap word bolte ho na , boom 💥 guy's and this is it guys , sun ke mza aa jata ha 🥰🥰

  • @nawarajjaishi4710
    @nawarajjaishi4710 3 года назад +7

    Instead of creating a second Hook, we can use the First one to display Value after Hello. Like this:
    import React, { useState } from "react";
    const App = () => {
    let [inputValue, setValue] = useState(" ")
    const inputEvent = (event) => {
    // console.log(event.target.value)
    inputValue = event.target.value
    }
    const Submit = () => {
    setValue(inputValue)
    }
    return (


    Hello, {inputValue}

    Submit


    );
    };
    export default App;

    • @nawarajjaishi4710
      @nawarajjaishi4710 3 года назад +1

      By Doing like this We have any problems? Let me Know plz....

    • @motivationforlife123
      @motivationforlife123 2 года назад +1

      @@nawarajjaishi4710 yes u don't get correct output. Did u execute in this way?

  • @Bijay1023
    @Bijay1023 2 года назад +1

    your videos are beyond words
    super se bhi upper

  • @todayrashifalinhindi586
    @todayrashifalinhindi586 3 года назад

    apse mene bhut kux sikha hai .. isliye tqq so much bro

  • @inderacademy7101
    @inderacademy7101 4 года назад +7

    Hi Vinod your videos are very helpful for us Thanks for making videos for bigginers like me .
    Please make one series on react with redux

  • @wasifirshad9818
    @wasifirshad9818 2 года назад

    AND BOOM GUYS, HE IS A GENIUS

  • @adasdataengineer
    @adasdataengineer 3 года назад +9

    This also Works:
    import React,{useState} from "react";
    function App(){
    let val="";
    const [state, setstate] = useState("")
    const chng=(event)=>{
    val=event.target.value;
    };
    const Fn=()=>{
    setstate(val);
    }
    return (

    Hello {state}

    Submit

    );
    }
    export default App;

    • @anti-tankartur677
      @anti-tankartur677 10 месяцев назад

      yea i did the same, diminishes extra lines of code

  • @imnemo2327
    @imnemo2327 3 года назад +4

    If anyone having problem that react page loading becuz of form imported from bootstrap then just remove type submit from button and for from the first label nice and simple

  • @noobCoder26
    @noobCoder26 3 года назад +1

    u are great bhaiyaa .. u are doing a lot of work to spread ur knowledge free over the internet which the coding bootcamps charge thousands of rupees from us . love u ♥♥❤

  • @grgsarun9798
    @grgsarun9798 4 года назад +1

    Congarts binod dai 150 k subscriber

  • @jade7945
    @jade7945 3 года назад +3

    :) thnku sir for cracking jokes in between ,atleast we dont get bored of studying hahahah

  • @SridharJammalamadaka
    @SridharJammalamadaka 2 года назад +2

    Nice explanation... but needed an example of uncontrolled component

  • @milindkhadse556
    @milindkhadse556 2 года назад

    Very useful information thank you

  • @ajayn1973
    @ajayn1973 4 года назад +1

    1st like nd 1st comment jst Awesome

  • @noobCoder26
    @noobCoder26 3 года назад +1

    u are doing an awsome job vaiyaa

  • @musiclovers8488
    @musiclovers8488 3 года назад

    Boom ho Gaya!!
    Or Boom mujhe bhi samajh aa Gaya..

  • @dreamerb1
    @dreamerb1 Год назад

    vinod bhai is the best❤❤

  • @prernasingh840
    @prernasingh840 3 года назад

    Jitni bar apki video deekho add on hi hota hai knowledge me...

  • @faizanmushtaq4667
    @faizanmushtaq4667 4 года назад +1

    thapa this is the easy way to do this .
    import React from 'react';
    const App = () => {
    let hello = "Hello"
    const inputValue = () =>{
    let inputId = document.getElementById('inputId');
    let heading = document.getElementById('heading');
    heading.innerHTML = hello + " " + inputId.value;
    }
    return(







    {hello}

    Enter







    );
    }
    export default App;

  • @luffydono0
    @luffydono0 7 месяцев назад

    day 6 of react js
    starting here
    didnt able to complete 40 videos bcz of them mini projects in between. today i sat earlier for studying lets see how much i can do

  • @aPCreations191
    @aPCreations191 3 года назад +1

    Boom
    GREAT TUTORIALS
    Boom

  • @rajbannasa7662
    @rajbannasa7662 3 года назад

    crazy sir , thank you so much sir

  • @saurabrakshit405
    @saurabrakshit405 3 года назад +2

    without using value attribute in the Input Box we are able get the required output .

  • @letsshowdesigns
    @letsshowdesigns 4 года назад +2

    After this kindly make small website and elaborate the main concept of front end and back end use react as a front end and php as a back end.

  • @omkargharat8391
    @omkargharat8391 3 года назад +1

    9:39 Which extension you are using so that you are getting such suggestions . Please anyone tell me how can I get this in my vscode

  • @aswath8265
    @aswath8265 3 года назад +1

    In this example is it possible we can do that without value field

  • @siddharthsingh4862
    @siddharthsingh4862 4 года назад +1

    Will you plz make 2-3 more videos on Events which are commanly use during webdesign

  • @SunilKumar-gn4wb
    @SunilKumar-gn4wb 4 года назад +1

    Thapa sir, please make video series of react js and backend php

  • @rajbannasa7662
    @rajbannasa7662 3 года назад

    thank you so much sir

  • @dr.shreyas123
    @dr.shreyas123 4 года назад +2

    Hi sir, please let me know which extension are you using for auto import modules?

  • @thenameisdev7242
    @thenameisdev7242 4 года назад

    3rd view love your work bhaiya

  • @ermahesh2009
    @ermahesh2009 2 года назад

    Thanks bhai

  • @_code.hunter_
    @_code.hunter_ 2 года назад

    Iss me input me value={name} likhne ki kya need he without value likhe bhi ho jayega na ye run properly

  • @darshanadey4696
    @darshanadey4696 4 года назад +1

    Hi, please also make a video on class components

  • @mallikasethi2604
    @mallikasethi2604 4 года назад +1

    why do we necessarily need to give the value attribute?

    • @surathjhakal9386
      @surathjhakal9386 4 года назад

      even i'm confused with that why do we need value attribute and what is the use of it..

  • @Akshay-Malthane
    @Akshay-Malthane Год назад

    Im coming after Angular so i found that this is more complicated.
    In angular we use two way data binding and thats it

  • @Vi99770
    @Vi99770 3 года назад +1

    i liek that sentence the way you say 321 boom

  • @shristi_Bharati
    @shristi_Bharati Год назад

    Sir mera app.jsx kv kaam ni krta aisa q.
    Agr wahi same code kuch bhi name.jsx m rkhte to ho jata

  • @adityarathi3420
    @adityarathi3420 2 года назад

    Thanks Sir :-)

  • @anandagharami8957
    @anandagharami8957 3 года назад +1

    Sir,
    value ={name} is attributes ka important ka he??

    • @Rohan_-kk1pu
      @Rohan_-kk1pu 3 года назад

      pta chale toh mujhe bhi btana bhai

  • @vikrambam1184
    @vikrambam1184 2 года назад +4

    i did like this :
    import React, { useState } from 'react'
    import './Form.css'
    const Form = () => {
    let val = ''
    const [show , UpdShow] = useState(val);
    const showText = ()=>{
    let newVal = document.querySelector('input').value;
    UpdShow(newVal);
    }
    return (


    Hello ..! {show}

    Submit


    )
    }
    export default Form

  • @siddhesh3651
    @siddhesh3651 3 года назад +2

    Sir please build email verification using React 🙏

  • @onkarswami
    @onkarswami 3 года назад +2

    7:13 how many of you seen "Control uday control"😁😂

  • @thecoderraj3777
    @thecoderraj3777 4 года назад

    Thanks sir :)

  • @cutebaby_shivanya
    @cutebaby_shivanya 4 года назад

    Sir agar humne react mein ek nav bar bnai hai aur vhi navbar hmne reuse krni hai for sidebar bs ek do items ko add krke ya delete krke to use kaise reuse kr skte hai?

  • @couldbenimish
    @couldbenimish 4 года назад

    How to do it on a keypress of Enter key? What should be passed in onKeyPress event??

  • @surajjadli1747
    @surajjadli1747 3 года назад +1

    why not use 62.5% in react css

  • @DEEPANSHU_NAG
    @DEEPANSHU_NAG 4 года назад

    Awesome as always ✌🏻
    Bhai kya aap mere se naraj ho kuch dino se comments ka reply nhi aaya ?

  • @SagarMotorrad
    @SagarMotorrad 3 года назад

    Can you please let me know why use twice usestate, 1. name, 2. fullName

  • @pavangowda1418
    @pavangowda1418 3 года назад

    I don't no reactjs versions concepts which is replaced can u create pdf

  • @prajjwalkumar9568
    @prajjwalkumar9568 3 года назад

    Bhaiya ek video banao unctrolled component k liye poora full detail me

  • @hariindora5491
    @hariindora5491 4 года назад +5

    CORS (Cross-origin resource sharing)
    Bhai please 🙏 esko ek bar Hindi me explain KR do pure RUclips pr is topic pr Hindi me video nhi hi...... please 🙏

  • @Magic_of_code
    @Magic_of_code Год назад

    sir i want data in second page
    so how can this be done

  • @SidraJabeen-b5l
    @SidraJabeen-b5l Год назад

    I want to ask that in the console when we hit any letter just like I'm adding vinod on every letter it is showing in the next like
    vi
    vin
    vino
    vinod
    it is added in the next line like you have shown us I don't get how to resolve it .
    @Thapa Technical

  • @kushagragautam3979
    @kushagragautam3979 4 года назад +1

    redux pe bhi banao

  • @htsscreatorshtsscreators7674
    @htsscreatorshtsscreators7674 4 года назад

    Awesome

  • @sahildonde8729
    @sahildonde8729 2 года назад +1

    I am get a warning saying that - 'App component is not running in StrictMode'..
    Can anyone help me out to solve this warning
    Also, when I open the React Builder Tool - Components, then my App component doesn't work but when I close the Components, then App component works..
    Does anyone knows why it happens ?

  • @sachinjha6333
    @sachinjha6333 Год назад

    THAPA TECHNICAL
    CODE WITH HARRY AND
    CLEVER PROGRAMMER ALL ARE GEMS

  • @sufisufyan6489
    @sufisufyan6489 4 года назад

    zabardast

  • @atiqurrehman1951
    @atiqurrehman1951 4 года назад

    Sir Make series on Nodejs with reactjs

  • @rajibbaruaexp
    @rajibbaruaexp 4 года назад

    Thank you

  • @RohiTECH001
    @RohiTECH001 2 года назад

    ♥♥

  • @yogeshsarowgi7599
    @yogeshsarowgi7599 4 года назад +10

    Can you tell me the use of value because without using the "value" we can perform the same task.

    • @nawarajjaishi4710
      @nawarajjaishi4710 3 года назад +1

      Yes I do that task without using value see my code on above comment

    • @imadityajain
      @imadityajain 3 года назад

      I just also want to ask that we can perform the task without using value then why should we use this?

    • @kashmirtechtv2948
      @kashmirtechtv2948 3 года назад +1

      @@imadityajain bhai ki videos is video k baad confusing hi hn.. Bhai professionaly bhi kaam ni krty..

    • @mobpsycho6600
      @mobpsycho6600 2 года назад

      If you got the reason behind using that 'value' attribute then you can tell us

    • @digitaltanzeel1056
      @digitaltanzeel1056 Год назад

      and one more confusion if we use useref how can we show data on userinterface without using usestate ..then anyhow we use a usestate

  • @MyGeniusFacts
    @MyGeniusFacts 2 года назад

    Sie, formik and yup libraries par video

  • @navneetsingh5311
    @navneetsingh5311 4 года назад

    thankss

  • @PRIYAKumari-zm1ql
    @PRIYAKumari-zm1ql 4 года назад +1

    source code kaise milega ye sb

  • @sandeeppal2045
    @sandeeppal2045 3 года назад

    thapa sir how did you do your console dark

  • @aravindgkp
    @aravindgkp 4 года назад

    Plz make a video for attractive loginpage using bootstrap

  • @Vandanasharma-zj6up
    @Vandanasharma-zj6up 3 года назад

    I wanted to ask why can't we use just one useSatate ? What is the need of two useState ?

    • @Ashish123
      @Ashish123 3 года назад

      yes we can easily do it using only one useState

  • @shivamkumar-ez9fl
    @shivamkumar-ez9fl 4 года назад +1

    Bro whatsapp washing event ka scripts bnaya na pliz 🙋‍♂️🙋‍♂️👍👍👍👍👍

  • @prakashrahangdale1563
    @prakashrahangdale1563 3 года назад

    sir without giving the value attribute inside the input its work so why we define it?

    • @sahilhans1867
      @sahilhans1867 3 года назад

      Value attribute in inputs is used in backend to do get or post request to insert data into database or whatever.

  • @VaibhavPatil-o1l
    @VaibhavPatil-o1l Год назад

    onclick karte time , aapne setFullName(name); to my question is setFullName(fullName); kyu nai likh sakte?

    • @Codewithminutecoder
      @Codewithminutecoder 11 месяцев назад

      SetFullName("Jo value hume pass krni hai")---->kuch bhi pass kr skte hai name->ek variable hai jisme input me jo bhi value aayi wo name store kr rakhi hai

  • @karamveersachdeva935
    @karamveersachdeva935 3 года назад

    Aise nhi jaise vo likh rha h v i or server p ja rha hai .......that sounds funny😆

  • @anuragmaurya6860
    @anuragmaurya6860 Год назад

    page referesh hone pr 1 sec ke baad sb kuch waisa hi ho ja rha? Is there someone who can help me

  • @20nupokhrel
    @20nupokhrel 3 года назад

    @Thapa_technical it didn't work for me can any one correct where am i wrong ??
    import React, { useState } from 'react';
    const App=()=>{
    const[name,setName]=useState("");
    const[fullName,setFullName]=useState();
    const inEvent = (event)=>{
    console.log(event.target.velue);
    setName(event.target.velue);
    };
    const onSubmit=()=>{
    setFullName(name);
    }
    return (
    Hello {fullName}
    Click Me
    );
    }
    export default App;

  • @nabiagahmedtariq5772
    @nabiagahmedtariq5772 2 года назад

    'event' is deprecated.ts(6385)
    Give Solution

  • @arslanjappa4335
    @arslanjappa4335 4 года назад

    bro plz redux k to apny btaya he nai

  • @downloadshub1174
    @downloadshub1174 3 года назад

    Ye to bohat mushkil hota ja raha hai q k ye to Sirf form me ek hi chez pe kam Kiya input and button agar Pura form banayengy to pata nahi Kia Kia karengy

  • @sunielsharma8142
    @sunielsharma8142 4 года назад

    Dai daraj jasto Application kasari banaune tutorials liyera aaunush pls sir

  • @ShafiUzzama-e2k
    @ShafiUzzama-e2k 10 месяцев назад

    react ka kuch video lee k aaye 3ya5hr latest

  • @sidtiwari9258
    @sidtiwari9258 4 года назад

    Can you share console with final ouput bcz there is warning something "component is changing an uncontrolled "

    • @sidtiwari9258
      @sidtiwari9258 4 года назад

      plz can you help

    • @sachinsubudhi6145
      @sachinsubudhi6145 4 года назад +1

      @@sidtiwari9258 This is a warning. It is displaying becuase we are changing the event from uncontrolled to controlled.
      @Thapa Techinal is this expected?

    • @debugwithshoaib
      @debugwithshoaib 3 года назад

      Give some default value to your state.
      For example: const [name, setName] = useState("");

  • @aarchivetales
    @aarchivetales 2 года назад

    useState is not working

  • @deepakrawat9758
    @deepakrawat9758 3 года назад

    I didn't get this video, Many things in this you have not told us sir

  • @Vikashkumar-hm8vq
    @Vikashkumar-hm8vq 4 года назад

    bro ek weather App v banana na using react

  • @ShafiUzzama-e2k
    @ShafiUzzama-e2k 10 месяцев назад

    kuch newproject lee k aaye react pe

  • @vaibhavjain4934
    @vaibhavjain4934 4 года назад

    Sir make a video on email template plzzz

  • @friendsfamily8039
    @friendsfamily8039 3 года назад +1

    sir, please provide source code

  • @good114
    @good114 Год назад

    💞♥♥💞

  • @ravitokas84
    @ravitokas84 3 года назад

    Something went wrong in this video it stop in last quarter of time

  • @ankurshukla2437
    @ankurshukla2437 3 года назад

    We want MERN stack

  • @harshit3560
    @harshit3560 3 года назад +1

    Plz provide CSS file in your description : )

  • @kashmirtechtv2948
    @kashmirtechtv2948 3 года назад

    Ni smj aya last s.. Dbara dekhna pry ga

  • @hmrahim357
    @hmrahim357 4 года назад

    Hello Dear binod bro i want to learn haw to make a stopwatch by pure javascript....plz make a stopwatch for me

    • @wrestlingmonster3638
      @wrestlingmonster3638 4 года назад

      Mere channel par visit karke dekho

    • @hmrahim357
      @hmrahim357 4 года назад

      @@wrestlingmonster3638 vaiya visit tw kiya but stopwatch ki koyi video nehi mila.....agar hai tw ap mention karo na plz

    • @youtubewallah543
      @youtubewallah543 4 года назад

      you know binod before matter start of binod :-)

  • @atifkhan-ix1jc
    @atifkhan-ix1jc 3 года назад +1

    angela yu ka content copy keye ho booooom

  • @mazharimam9216
    @mazharimam9216 3 года назад

    its getting complicated now