React, similarly to HTML, uses forms to allow users to interact with the web page. Through forms, React can collect and process data from users. The term forms include all input fields from text boxes, checkboxes, radio buttons, etc.
Adding a form is fairly simple– just like adding any other React element. As in HTML, we use the <form> element to provide a way for users to enter data and submit it to the server:
We define a function component called MyForm with two input fields for the user's name and email, and a submit button.
const root = ReactDOM.createRoot(document.getElementById('root'));
We use the ReactDOM.createRoot() method to create a root React element that asynchronously renders the MyForm component into the DOM (a representation of the HTML elements currently rendered in the browser).
root.render(<MyForm />); renders the form element into the DOM asynchronously.
Note that the use of createRoot and render methods is a new feature of React 18. In earlier versions of React, we would use the ReactDOM.render() method to render a component synchronously.
To control the form using React we will need to introduce a new significant concept.
React components have two types of data: props and states. Props are passed to a component from its parent component and are read-only. A state on the other hand, is managed within the component itself.
Forms in React.js work by maintaining the state (aka, the condition) of a piece of data entered by our user. When a user interacts with an input field, such as typing in a text box or selecting a checkbox, React.js updates the state of the field which corresponds to the form. This allows the application to keep track of the user's input real-time.
Now, in HTML, the form data is usually handled by the DOM. However in React, it is the components that update the state with event handlers called in response to the user input.
For example, if we have a component whose function is to be a counter, the state could keep track of the current count. Each time the user clicks a button, the state could be updated to reflect the new count. The code for such a component might look like:
You may have noticed the useState hook being used in the code above. useState allows us to define a state variable and a function to update that variable. When the user activates an input field, the onChange event is triggered, which in turn calls the update function to update the state variable.
Another common method is the setState method, used to update the state of a component within class components. The useState hook is, in contrast, used to define state variables and update functions in function components.
The onSubmit attribute is an event handler which specifies a function to be called when a form is submitted. This contains information about the form submission, including the values of the forms inputs.
For example:
