How are forms created in ReactJS ?
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. Creating a form in React is almost similar to that of HTML if we keep it simple and just make a static form.
Prerequisites:
Steps to Create 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:
package.json:
"dependencies": {
"react": "^18.2.0",
"react-dom":"^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
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.
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.
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.
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:
Contact Us