React for Beginners #6 - Forms & Events

Welcome back to another react tutorial video! In this video, I'll be covering forms and events. We'll be taking all the stuff we learned from the previous tutorials and using them to create components that we'll use through the rest of this series.

⭐️ Timestamps ⭐️
00:00 | Introduction
01:21 | Creating The Search Bar
06:14 | Controlled Components
08:25 | onChange Event
11:38 | onClick Event
14:13 | Updating Parent Components State

◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
💰 Courses & Merch 💰

🔗 Social Medias 🔗

🎬 My YouTube Gear 🎬

💸 Donations 💸
◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️

⭐️ Tags ⭐️
- Tech With Tim
- React
- React Tutorial
- Programming
- Forms
- Events

⭐️ Hashtags ⭐️
#TechWithTim #ReactTutorial

[gen_massup]

I started learning react a few months ago then just got busy with other stuff.. but these short series and detailed explanations I’m really enjoying it. Thanks Tim.

[blazi_]

I know this is a bit difficult for beginners, but you can't simplify react forms more than this .tim did great job !

[plusk]

htmlFor is basically just jsx syntax :)

[katykat]

Tim's React course is the best, he's good at explaining stuff

[milosignjatovic]

Small note, maybe it's worth mentioning. In my case, I needed to add preventDefault() method call to forms button onClick function in order to prevent submitting the form.

[richteraueisen]

Thanks Tim! Excited for the useReducer and useContext hooks tut coming

[seanmcelroy]

I think the reason it wants you to use 'htmlfFor' instead of just 'for' is because for is a keyword in Javascript

[inspisiavideos]

Hi! I have a question but I think it's more like an advise. I got a paid internship at a company that protects data for hospitals. The internship first day introduction day (last week) I was told by HR and some senior employees that I will be rotating first doing QA Engineering job (testing apps from the developers, watching out for bugs, zoom meetings and scrum). Then I'll be rotating to write code in Java. HR later gave me a Powerpoint presentation and one of the slides had info about all the job positions people can apply to and get a bonus by bringing in a new recruit. But the HR lady said it does not apply to interns. During my first week I have done nothing but trainings and explanations of the platforms. I feel like it's a lot for a team. So, the question is if with all this, do you think if I ask them if I could stay permanently there or to have my stay there extended. If so, at what point I should ask? My full time internship ends ending August. My concern is that I did the decision of quitting my previous job as an Assistant for nurses in order to have this opportunity. Just in case I signed up for algoexpert and train coding problems so I can be prepare and start applying to jobs at other companies. But, I'm concerned about this because I have 3 months before my income ends. Please let me know.

[emcysquare]

thanks, and please keep up the awesom work

[isaacadam]

Tim ur gud man bro. Keep it up. From Tanzania

[azazel-oss]

use of Javascript keywords like 'for' and 'class' is discouraged while writing as attributes in JSX, it doesn't have any effect on the functionality but still, it is not recommended.
Another argument is that keywords can't be used as props names because then it won't be possible to destructure them, just a way to memorize why we shouldn't be using 'for' or 'class' in JSX

[RDNERO]

Recently i am working on a project with python, which is about to create a calendar like Google that we can add events and show them in the schedule, but i can't find any tutorial about that, is it available to do it with python? (I am very new to python and coding)

[MartinVit]

Firstly I thought that for problem is because it is not connecter to field name (you use id), but in jsx for should be used for for loops and as field should be used hmlFor :D

[Ben-repe]

Hey ans me a question- if my target is big tech companies or like small startups in starting.
Should i do competitive programming or development?
or just go with whatever makes me feel comfortable?

[prudhvichinnam]

Instead of {name:name, price: price} use {name, price} if we have same name 👍

[SaadAbdulHakimQureshi]

for is a reserved keyword in JS so it is replaced with htmlFor, exactly like class is replaced with className

[markusmoeller]

Concerning label and for: the IDE I use to follow along is Webstorm and it suggests here to use form instead of for because for is not allowed in the specific context. Using this I got no error in the console.

[alanjiang]

What formatting tool are you using to autoformat your code?

[duanedodson]

For some odd reason, my app keeps telling me there is an error in the info.js file, being the info.js file was deleted at the beginning of this video, why does react keep telling me this?

[timhowitz]

Why not just use useRef instead of onChange and useState for the input fields?