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.
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..
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.
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….
