Yayyy!! Mindbrews First Edition is now live on Magzter!

Developers & Open Source

Things You should know Before You Use React Forms…

ReactJS forms

Today we are going to talk little about Forms in reactjs and how you can become expert in making one.

Let’s go….

But first what is form and why we need them

This contact form here is a basic example of forms were you wish to take some information from the user and save that to your database. There are some things that are very important for forms like validation, showing error. This is very important for a form to have validation like in the phone field you can’t give value that is greater than 10 numbers for in email id field value should be a valid email and if not form should show warnings.

Suggested:  Context processor in Django

These warnings can be of two types in general first is you give the warning or error right after user enter the values which you can do with simple HTML field Validators. Or show the errors after the form is been submitted those errors can come from backend itself.

Data Collection: The Problematic Part

But why, How we normally save data? In states or may be in props and then add onChangeState function and user setState to set new value. Right?
Here We have almost 12 things to save and wait forms can be even bigger sometimes so, it is not possible to maintain all those states etc etc..

Suggested:  Machine Learning Libraries Which Every ML Enthusiast Must Know Of

Here is a kind of shortcut to do all the things

Step1:

Create an Object in the state which will maintain all the fields.

this.state{
    field_data: {}
}
Step2:

We can create a very generic onChange function which will save all the states.

onChnage(event){
    this.setState([event.target.name]: event.target.value)
}
Step3:

Create Input fields

<>
 <input 
    type="text" 
    name="user_name" 
    placeholder="Username" 
    required="required" 
    value={this.state.field_data['user_name']} 
    onChange={this.handleChange(e)} /> 
</>

event.target.name gives the value of name of input which we can define in HTML using name=”something” and event.taget.value will give its value. setState is used to updates value in state.

How to show errors from backend?

(api_error['user_name')? (<span style="color:red"> api_error['user_name']</span>) : ('')

Just add this after every input field and errors will show up just like that. Don’t forget to make a new state api_error where you will save all the errors from the backend.

Suggested:  DENIM FASHION- Trendy & Stylish

This should make your life easy with it comes to react forms at least. Hope you have learned some things here.
This trick saves a lot of work time and saves us from writing extra code here at Letstream.

If you have some other tricks or suggestion for this blog post. Do let me know in comment section below. Let’s solve problems together….

Related posts
Beauty & FashionCelebrityGlobalLatestLifestyleWomen

Love the monsoon style, through these hacks.

GlobalLatestLifestyleMenWomen

DIY trends for you to try

MenMen Fashion & Trends

Know Your Polo T-Shirt: A 'Fabricated' Gentleman's Guide

Developers & Open Source

Manage your React State better with Redux

Worth reading...
Manage your React State better with Redux