In a controlled component, the value of the input element is controlled by React.
We store the state of the input element inside the code, and by using event-based callbacks,
If we want to change the input element then it will be reflected in the code as well.
Below the code of controlled component of react,
function FormValidation(props) {
let [inputValue, setInputValue] = useState("");
let updateInput = e => {
setInputValue(e.target.value);
};
return (
<div>
<form>
<input type="text" value={inputValue} onChange={updateInput} />
</form>
</div>
);
}