Full React Tutorial #28 - Submit Events

Hey gang, in this React tutorial we'll take a look at form submit events & how to react to them.
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iamshaunjp/Complet...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/v...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱‍💻 🐱‍💻 Helpful Links:
+ HTML & CSS Course - • HTML & CSS Crash Cours...
+ Modern JavaScript course - • Modern JavaScript Tuto...
+ Get VS Code - code.visualstudio.com/
🐱‍💻 🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

Пікірлер: 55

  • @maskman4821
    @maskman48213 жыл бұрын

    ~Notes~ Handle form submission in reactjs 1. assign a handler to submit event in form element 2. within submit handler we prevent page refresh 3. implement post request with fetch api to send post data to designated api thats all !!!

  • @victorvondoom2350

    @victorvondoom2350

    2 жыл бұрын

    i wish there were more helpful people like you . you turn the world less stupid because of your comment. you may know this but your comment has enlightened me , quite deeply .

  • @rakeshwasnik9327

    @rakeshwasnik9327

    Жыл бұрын

    do you have the same for other videos in the series as well

  • @TheRahulDBZ
    @TheRahulDBZ3 жыл бұрын

    I am watching these videos like a TV series with each new episode coming everyday. Thanks

  • @shinchanshukla3938

    @shinchanshukla3938

    2 жыл бұрын

    ohooooooooooooo

  • @lorenzolonghi8697
    @lorenzolonghi869710 ай бұрын

    Your tutorials are really so clear, useful, straight to the point and not long. The value you bring with your video is just incredibile. Thank you so much for everything you do

  • @Ari-pb4uo
    @Ari-pb4uo2 жыл бұрын

    WOWW. You're videos have big a game changer. You explain everything perfectly. MY FAVEEEE . I am soo happy to have discovered your channel!

  • @johncmm9759
    @johncmm97592 жыл бұрын

    Insanely high value videos. Thank you so much!

  • @dailybread8990
    @dailybread8990 Жыл бұрын

    Your tutorials are so so good. Iean they are the best. Simple, easy and straight to the point. I would really love a web3 tutorial with solidity, ethers, react and hardhat 🙏

  • @NetNinja

    @NetNinja

    Жыл бұрын

    Thank you :)

  • @Anon19933
    @Anon199332 ай бұрын

    Thank you very much, Shaun. Great Work!!

  • @hasanalkhder6260
    @hasanalkhder62603 жыл бұрын

    After the great course i think it will be good to start work on some projects , so we will wait for the video's dear Thanks

  • @javim7189
    @javim71893 жыл бұрын

    thank you very much this video was very helpful

  • @alfonsoramirezelorriaga1153
    @alfonsoramirezelorriaga11532 жыл бұрын

    Thank you. May God bless you

  • @Mahmudulhasan-ts5hm
    @Mahmudulhasan-ts5hm3 жыл бұрын

    thanks brow

  • @user-wq3vr3yy9k
    @user-wq3vr3yy9k Жыл бұрын

    Incredibly useful! Thanks!

  • @NetNinja

    @NetNinja

    Жыл бұрын

    Thanks Caleb! :)

  • @AlexFeature
    @AlexFeature Жыл бұрын

    2:21 I respect your authoritah!

  • @BizzaroBrainBoi
    @BizzaroBrainBoi10 ай бұрын

    damn this guy is good, thank you net ninja!

  • @andromilk2634
    @andromilk26344 ай бұрын

    But even if we didn't use the preventDefault, wouldn't our event function still be fired and do its actions? Is there a reason we want to prevent the refresh of the page after we submit our form?

  • @iotrnd2384
    @iotrnd23842 жыл бұрын

    its really good stuff

  • @GustavoHenrique-dm7lh
    @GustavoHenrique-dm7lh2 жыл бұрын

    amazed with this videos :)

  • @tabmax22
    @tabmax222 жыл бұрын

    So is the action attribute not general practice for submitting forms in React?

  • @woofcode3383
    @woofcode33832 жыл бұрын

    thanks so much

  • @kalltreaionc
    @kalltreaionc6 ай бұрын

    Thank you --- your courses are top notch. Natural born teacher... we appreciate you sir.

  • @NetNinja

    @NetNinja

    6 ай бұрын

    That means a lot :) thank you!

  • @ridl27
    @ridl273 жыл бұрын

    ty

  • @unknownman1
    @unknownman13 жыл бұрын

    Thanks.

  • @son7459
    @son74593 ай бұрын

    May I ask, why is "clicking the button" automatically understood as the action "submitting the form" ? I mean, you don't put type="submit" inside the button, it's literally just a button with no function. I wonder if onSubmit auto assigns the button as the submit handler? If anyone can help, thank you!

  • @vp--
    @vp-- Жыл бұрын

    Thank you

  • @NetNinja

    @NetNinja

    Жыл бұрын

    You're welcome Vivek!

  • @Ridhu
    @Ridhu3 жыл бұрын

    Any novice teacher would have combined this video and the next video as a single video. This is where you make a difference by abstracting submit event and post request

  • @alexberdea
    @alexberdea Жыл бұрын

    Consolelogtheblog!! clb , baby

  • @Avatar-Roku
    @Avatar-Roku Жыл бұрын

    2:01...hey why are we defining the object with the elements title,body and author?? Why can't we take something else?

  • @perschonca
    @perschonca2 жыл бұрын

    I don't know how or when it happened but at some point my application in create.js tried to import e from 'express' which was giving me a bunch of errors. I was losing my mind as my code was identical to the github and then i realized this import was sitting at the top. Removed it and we are back at it lol. Wow that was frustrating LMAO. to clarify i have been following this tutorial to a T and think bill gates had something to do with it. In fact, im positive billy is the culprit, a truly sick person trying to derail a new dev. NOT TODAY BILLY, NOT TODAY.

  • @bradconklin3415
    @bradconklin34152 жыл бұрын

    How does it know that the button should trigger a "submit event"? Couldn't the button have some other function?

  • @sean_of_possession

    @sean_of_possession

    Жыл бұрын

    Not sure if you got your answer or not (late reply), but here it is: if you only have 1 button inside your form tags, that button's default type becomes 'submit.' This applies UNLESS you explicitly change the type attribute of the button to something other than 'submit', such as 'button'. The only button on your form with no type attribute set will automatically trigger the onSubmit function for the form.

  • @yema8319
    @yema83193 жыл бұрын

    Eyyyyy I made it here!

  • @ahmedel-hindawi9226

    @ahmedel-hindawi9226

    3 жыл бұрын

    same

  • @akhrorbekabdukhamitov8872
    @akhrorbekabdukhamitov88722 жыл бұрын

    love the series. let me know if you guys have a question so far. I will try to help with debugging

  • @Dev_who_decodes
    @Dev_who_decodes3 жыл бұрын

    how is it the blog object contains the information from form???

  • @freddyescobar96

    @freddyescobar96

    2 жыл бұрын

    it's simple javascript, when the key and value have the same name, you can do this: const blog = { title: title, body:body, author: author} it's the same to do const blog ={title,body, author} that means that the value of that object have the same name as in the state variables

  • @ammaralhomyqani9079

    @ammaralhomyqani9079

    2 жыл бұрын

    @@freddyescobar96 thank u so much, hope good day for you

  • @aybak3k
    @aybak3k3 жыл бұрын

    got a question idk if it's dumb or ! but how is it being submitted without having the btn have a type submit attr?????

  • @Cedielagekohaha

    @Cedielagekohaha

    3 жыл бұрын

    because of the form, when you click a button inside a form it will trigger a submit

  • @minhnguyenquocnhat3796

    @minhnguyenquocnhat3796

    Жыл бұрын

    @@Cedielagekohaha what happens if there are multiple buttons? How to assign different tasks to them if they are in the same form?

  • @sean_of_possession

    @sean_of_possession

    Жыл бұрын

    @@minhnguyenquocnhat3796 What @Cedric Sarigumba said applies ONLY if the button inside the form tags is the ONLY button in the form. If it is the only button, its type attribute defaults to 'submit' and will call the function in the onSubmit for the form. If you have multiple buttons inside your form tags, you will need to explicitly define the type attribute for one of them as 'submit'. The other buttons will default to 'button' unless you explicitly specify otherwise.

  • @jagaroTV
    @jagaroTV7 ай бұрын

    Im getting these errors..

  • @saidbekuz
    @saidbekuz3 жыл бұрын

    Heyyy Bro, How are you i am copying your videos in my mother language , i s that ok?

  • @intensiveadvancedmath5281

    @intensiveadvancedmath5281

    Жыл бұрын

    Qani?

  • @victorcardenas724
    @victorcardenas7242 жыл бұрын

  • @tarekghosn3648
    @tarekghosn36482 жыл бұрын

    e.preventDefault() never new why i used it.

  • @satyam1543

    @satyam1543

    Жыл бұрын

    to prevent page from loading when we click on submit button

  • @lofi_Insomnia_
    @lofi_Insomnia_2 жыл бұрын

    ty