Form is a document that stores information of a user on a web server using interactive controls. A form contains different kinds of information such as username, password, contact number, email id, etc. Forms are a very important component of a website. Because it enables the collection of data from the user directly which makes the website much more interactive. Creating a form in React is almost similar to that of HTML if we keep it simple and just make a static form. But there is a lot of differences that come while handling the data and retrieving the form submission.
Controlled Components: In simple HTML elements like input tag, the value of the input field is changed whenever the user type. But, In React, whatever the value user types we save it in state and pass the same value to the input tag as its value, so here its value is not changed by DOM, it is controlled by react state.
Creating react application:
Step1: Create a React application using the following command:
npx create-react-app name_of_the_app
Step 2: After creating the react application move to the directory as per your app name using the following command:
cd name_of_the_app
Project Structure: It will look like the following.
Now let’s understand with different examples.
Example 1: In this example, We are going to create a simple form component inside the App component of the App.js file. This is just a static form and it does not contain any sort of dynamic handling and processing of events so this form is a basic form and do not satisfy our requirement.
App.js
Javascript
import React from 'react'; import './App.css'; function App() { return ( <div className='App'> <div> <label>Input</label> <input type='text'/> </div> <div> <label>Textarea</label> <textarea rows='5'></textarea> </div> <div> <button>Submit</button> </div> </div> ); } export default App; |
Output:
Example 2: In this example, we are going to print the value inside the input box into the console log. To reach this we have to do the following :
- Create a new function named ‘detectChange’ . This function will print the value of the target JSX element.
- Call this function at ‘onChange’ event.
- This is going to print the value of the input box whenever it is changed.
App.js
Javascript
import React from 'react'; import './App.css'; function App() { function detectChange(e){ console.log(e.target.value) } return ( <div className='App'> <div> <label>Input :</label> <input type='text' onChange={detectChange}/> </div> <div> <button>Submit</button> </div> </div> ); } export default App; |
Output:
Example 3: In this example, we will be rendering the value inside the input box to another DOM element inside the same component using react state. Inside the App component of App.js
- Make an inputValue state with the value of an empty string.
- Set the value attribute of the input box equal to the inputValue state..
- Update the inputValue state using setState() method whenever a change occurs inside the input box.
- Set the text after ‘Entered Value :’ equal to inputValue state.
App.js
Javascript
import React from 'react'; class App extends React.Component { state = { inputValue: '' }; render() { return ( <div> <form> <label> Input </label> <input type="text" value={this.state.inputValue} onChange={(e) => this.setState( { inputValue: e.target.value })}/> </form> <div> Entered Value: {this.state.inputValue} </div> </div> ); } } export default App; |
Output :
