How are forms created in ReactJS ?
Last Updated :
20 Nov, 2023
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:
Share your thoughts in the comments
Please Login to comment...