Handling Forms in ReactJS the right way

Abhishek Agrawal — Thu, 16 Sep 2021 13:37:36 +0000

Hello everyone, recently I came across a new way to handle React forms, maybe its something you know, maybe you've been doing this for years and think I am an Idiot for not knowing this earlier, but it is what it is so let's go.

Using react forms the old way

Let's consider a simple signup form that contains only 3 fields namely username, email, and password. Here's how I used to use forms earlier.

import React,{useState} from 'react';
const SignUp = () => {
    const [username,setUsername] = useState("");
    const [password,setPassword] = useState("");
    const [email,setEmail] = useState("");

    const handleEmailChange(e){
        setEmail(e.target.value);
    }
    const handlePasswordChange(e){
        setPassword(e.target.value);
    }
    const handleUsernameChange(e){
        setUsername(e.target.value);
    }
    return(
        <form>
            <input type="text" placeholder="username" onChange={handleUsernameChange} value={username}/>
            <input type="email" placeholder="email" onChange={handleEmailChange} value={email}/>
            <input type="password" placeholder="password" onChange={handlePasswordChange} value={password}/>
            <input type="submit" value="Submit"/>
        </form>
    );
}

Maybe you think wtf is this guy and why is the code is so bad. There's only one thing I can say to you, sorry. To the other people who think there's nothing wrong with the code, prepare to get your mind blown.

Let's look at the problems with the code first-

Its a lot of state variables for handling a form, especially if you think about bigger forms with 10s of fields.
The handleChange functions are totally redundant and can be easily refactored.

So, now let's look at the amazing code to handle forms -

import React,{useState} from 'react';
const SignUp = () => {
const [formData, setFormData] = useState({
    username: "",
    email: "",
    password: "",
});

    const handleChange=(e)=>{
        const newFormData = {
            ...formData,
            [e.target.name]:e.target.value
        };
        setFormData(newFormData);
    }

    return(
        <form>
            <input type="text" name="username" placeholder="username" onChange={handleChange} value={username}/>
            <input type="email" name="email" placeholder="email" onChange={handleChange} value={email}/>
            <input type="password"  name="password" placeholder="password" onChange={handleChange} value={password}/>
            <input type="submit" value="Submit"/>
        </form>
    );
}

Beautiful code, Right? Well, when I found it I thought it was amazing and worth sharing.
But before you leave, make sure that the formData's keys are same as the input's name, else you're code won't work properly.

That's pretty much it.
Thank you for reading. Bye

Choosing your first programming language.

Abhishek Agrawal — Thu, 16 Sep 2021 13:04:44 +0000

The question of 'What programming language should I choose while starting off?' is a fairly common one. Whether you're in your freshman year at college or just getting started exploring the amazing world of computer science, it's often you'll get this question.

I also had the same question in my mind when I started learning programming and the one word answer is it doesn't matter.

I know its not the most amazing answer, but let's take some time to understand why it doesn't matter. Mostly all of the programming languages have similar syntax(the way they are written) or at least share the core fundamentals. Meaning, if you pick any language and master it, you can switch to any other without much difficulty, cause you know that you'll be using the same principles.
Also, it's important to keep in mind that programming is far more about how you think and solve problems than actually writing a random bunch of characters.

That being said there are still ways you can choose the first programming language that will help you a little more than others (talk about hypocrisy, duh).

Things to consider while choosing a language

Purpose

Here 'purpose' means what is your purpose to start learning a language in the first place, is it because you want to develop certain things, is it because you'd like to be a competitive programmer, or is it simply because you want to start learning a language.

Your choice will vary depending on your purpose.
For ex- If want to be an android developer I am better off picking something like Kotlin instead of JavaScript, not that JS won't help me, but Kotlin seems to make more sense.

Also, if you're one of the people who doesn't really have something in their mind the Generic way discussed later would be the best bet.

Time

The amount of time you have to learn a particular language may also impact your decision.

Maybe you've got an assignment to complete and you need to implement something, you're better of to do it with Python rather than let's say C#. Just cause python has an easier learning curve and is faster to grasp.

Your Peers

Now, this one's something you can consider but shouldn't impact your decision. It's simply better if you've got some great peers learning the same stuff that you are, it keeps you motivated, throws a little bit of competitiveness and you always have someone to look up to if you get stuck.

P.S. Even if you choose a language on your own, please do read the Step - 2 in the generic way.

Also, if you are learning something and are looking for peers, there are amazing communities out there where you can find a lot of like-minded people to learn with.
I'll link some of them below

There are also, many communities that focus on a particular language/tech stack. They're just a search away so, do look for them.

The Generic way (The best acc. to me)

Now, let's discuss the generic way of choosing a language. This is perhaps the most straightforward and fail-proof way of selecting a language.
I'll break it down in a couple of steps.

Step -1

Choose one of these two - Java / C++
and start learning them, learn the basic syntax, the programming fundamentals and all of the sweet things.

Let's discuss a little on why only Java/C++?
Both of these languages are excellent languages to start off as they have the perfect blend of understandable syntax, and weird looking things, as opposed to Python which has a really simple syntax.
But why would you wanna start with something difficult? Because it will ultimately make it easier for you to switch later if you want to.
It will also help gain deep knowledge about object-oriented programming which is one of the most important concepts in computer science.
Also, almost all of the companies have at least these two languages as an option for their interview rounds. So, you're also staying safe, and not to forget these are the most used languages for competitive programming.

Step -2

Once you're comfortable with the language start learning Data Structures & Algorithms. I can't stress how important it is to do this. Everything that you'll do in computer science will fundamentally fall back to this. Whether you're developing a state of the art application or are competing with 1000s of students in a coding challenge. The knowledge of DSA will stick with you and make you a better programmer.

Step -3

Explore the field of computer science, try out a couple of things, see what interests you the most and then see what are the pre-requisites that particular technology has and start learning it.
In the process, you'll observe how all of the things you learn are smoothly getting transitioned into whatever you're learning

Step-4

Be Awesome. You now know what to do, so go out there are build amazing things.

That's it for this post folks. Hope you got some insights.

DEV Community: Abhishek Agrawal