Controlled and Uncontrolled Form in React

There are two ways to create a form in React. One is controlled and the other is uncontrolled. The basic idea behind the controlled method is to use useState and onChange whereas uncontrolled method use useRef.

Controlled

Note that the following codes are just prototypes.

import React, { useState } from ‘react’;
import { Form, Button } from ‘react-bootstrap’; export default function controlledForm() { const [username, setUsername] = useState(“”); …