Loading lesson path

React•React Core Practice

React Forms

Just like in HTML, React uses forms to allow users to interact with the web page.

Adding Forms in React

You add a form with React like any other element:

Example:

Add a form that allows users to enter their name:

function MyForm() {
return (

<form>

Formula

< label > Enter your name:

<input type="text" /> </label> </form> )

createRoot(document.getElementById('root')).render( <MyForm />

);

This will work as normal, the form will submit and the page will refresh. But this is generally not what we want to happen in React.

We want to prevent this default behavior and let React control the form.

HTML Forms vs. React Forms In React, form elements like <input>, <textarea>, and <select> work a bit differently from traditional HTML. In standard HTML, form elements maintain their own value based on user input. For example, an <input type="text"> field keeps track of its own value in the HTML DOM. In React, the value of the form element is kept in the component's state property and updated only with the setState () function.

In other words; React provides a way to manage form data through component state, leading to what are known as "controlled components."

Controlled Components

In a controlled component, form data is handled by the React component. The value of the input element is driven by the React state, and any changes to that value are managed through event handlers that update the state. When the data is handled by the components, all the data is stored in the component state.

We can use the useState

Hook to keep track of each input value and provide a "single source of truth" for the entire application.

See the

React Hooks section for more information on Hooks.

Example:

Use the useState

Hook to manage the input:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
const [name, setName] = useState("");

function handleChange(e) {
setName(e.target.value);
}

return (

<form>

Formula

< label > Enter your name:

<input type="text"

value={name}
onChange={handleChange}

/> </label>

<p>Current value: {name}</p>

</form> )

createRoot(document.getElementById('root')).render( <MyForm />

);

Run

Example »

Example Explained:

Import the useState

Hook from React:

import { useState } from 'react';

Declare a state variable to hold the input's value and a function to update it:

const [name, setName] = useState("");

Create a function to handle the change event:

function handleChange(e) {
setName(e.target.value);
}

Set the value of the input field to the state variable and the onChange attribute to handle the change event: <input type="text"

value={name}
onChange={handleChange}

Display the current value to show that the value is being updated:

<p>Current value: {name}</p>

Initial Values

To add an initial value to the input field in the example above, add a value to the useState object:

Example:

Use initial value for name:

function MyForm() {
const [name, setName] = useState("John");

...

Run

Example »

React Conditional Rendering

React Submit Forms

Loading lesson path

Learn/React/React Core Practice

React•React Core Practice

React Forms

Just like in HTML, React uses forms to allow users to interact with the web page.

Adding Forms in React

You add a form with React like any other element:

Example:

Add a form that allows users to enter their name:

function MyForm() {
return (

<form>

Formula

< label > Enter your name:

<input type="text" /> </label> </form> )

createRoot(document.getElementById('root')).render( <MyForm />

);

This will work as normal, the form will submit and the page will refresh. But this is generally not what we want to happen in React.

We want to prevent this default behavior and let React control the form.

In other words; React provides a way to manage form data through component state, leading to what are known as "controlled components."

Controlled Components

We can use the useState

Hook to keep track of each input value and provide a "single source of truth" for the entire application.

See the

React Hooks section for more information on Hooks.

Example:

Use the useState

Hook to manage the input:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
const [name, setName] = useState("");

function handleChange(e) {
setName(e.target.value);
}

return (

<form>

Formula

< label > Enter your name:

<input type="text"

value={name}
onChange={handleChange}

/> </label>

<p>Current value: {name}</p>

</form> )

createRoot(document.getElementById('root')).render( <MyForm />

);

Run

Example »

Example Explained:

Import the useState

Hook from React:

import { useState } from 'react';

Declare a state variable to hold the input's value and a function to update it:

const [name, setName] = useState("");

Create a function to handle the change event:

function handleChange(e) {
setName(e.target.value);
}

Set the value of the input field to the state variable and the onChange attribute to handle the change event: <input type="text"

value={name}
onChange={handleChange}

Display the current value to show that the value is being updated:

<p>Current value: {name}</p>

Initial Values

To add an initial value to the input field in the example above, add a value to the useState object:

Example:

Use initial value for name:

function MyForm() {
const [name, setName] = useState("John");

...

Run

Example »

React Conditional Rendering

React Submit Forms