Mongoose - Using CRUD operations in mongodb in nodejs
MongoDB CRUD Operations Mongoose provides a simple schema based solution to…
June 27, 2020
Lets take a look at how forms are being handled in ReactJS. We will have a very basic form having following fields:
On submit, we would just want to show the full name field. We will see:
import React, {Component} from 'react';
class Form extends Component {
state = {
firstName: "",
lastName: "",
fullName: ""
};
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value
});
}
handleSubmit = (event) => {
event.preventDefault();
this.setState({
fullName: `${this.state.firstName} ${this.state.lastName}`,
firstName: "",
lastName: ""
});
}
render() {
return (
<section>
<article>
<form onSubmit={this.handleSubmit}>
<input
type="text"
name="firstName"
value={this.state.firstName}
onChange={this.handleChange}
/>
<input
type="text"
name="lastName"
value={this.state.lastName}
onChange={this.handleChange}
/>
<button type="submit">submit</button>
</form>
</article>
<article>
<h1>Full Name</h1>
<div>{this.state.fullName}</div>
</article>
</section>
)
}
}
class App extends Component {
render() {
return <React.Fragment>
<Form />
</React.Fragment>
}
}
export default App;
In above form code, lets discuss various concepts:
[event.target.name]: event.target.value
This is a shorthand code to set the required field. If its not there, we would be doing set of if-else. And, checking if name is firstName of lastName. Something like:
if (event.target.name === "firstName") {
const textValue = event.target.value;
this.setState({
firstName: textValue
});
}
This is not at all required.
event.preventDefault();
This is to prevent the default behavior of submission. If its not there, entire component will re-rendered. This will cause the reset of our state.
This is a very basic form handling, and the objective is to give an idea of how the forms are handled.
Another way to get values of input fields is by using keyword ref. And, we can even set styles on the input items.
Lets take a look at the example:
import React, { Component } from "react";
class Form extends Component {
handleSubmit = e => {
e.preventDefault();
// accessing field from refs
const nameField = this.refs.nameField;
const nameFieldValue = nameField.value;
// accessing field by class's member variable
const email = this.email.value;
const infoText = this.refs.infoText;
const infoTextValue = infoText.textContent;
infoText.style.color = "red";
console.log(nameFieldValue, email, infoTextValue);
};
render() {
return (
<section>
<form onSubmit={this.handleSubmit}>
<input type="text" ref="nameField" />
<input type="email" ref={ev => (this.email = ev)} />
<button type="submit">submit</button>
</form>
<p ref="infoText">hello world</p>
</section>
);
}
}
class App extends Component {
render() {
return <Form />;
}
}
export default App;
You can see an interesting concept of getting values by using refs. For this, you need to give a ref value in input field and you can access them in any function of this component.
Another new thing we see is:
<input type="email" ref={ev => (this.email = ev)} />
Here, we are declaring a method in ref. And, we are setting the value into a variable email, which is class’s member variable. And, we can access class’s member variable anywhere in the class.
Another example of getting the p item and setting some color style on it.
const infoText = this.refs.infoText;
const infoTextValue = infoText.textContent;
infoText.style.color = "red";
To get the innerContent of this p field. We can use:
const infoText = this.refs.infoText;
const infoTextValue = infoText.textContent;
// get the value in <p> field.
MongoDB CRUD Operations Mongoose provides a simple schema based solution to…
Tag the image, by seeing its image id, from docker images command docker tag 04d…
Pre-requisite Assuming you have a mongodb database, and you want to take backup…
Its essential to prepare a git branching strategy. This helps greatly in…
I have a Java project and dependencies are being managed through maven. I have…
Introduction In this post, we will see ways to look at git history logs. For…
In this post, we will see some of the frequently used concepts/vocabulary in…
System design interview is pretty common these days, specially if you are having…
Introduction You are given an array of integers with size N, and a number K…
Graph Topological Sorting This is a well known problem in graph world…
Problem Statement Given a Binary tree, print out nodes in level order traversal…
Problem Statement Given an array nums of n integers and an integer target, are…