HTML Form Elements in React

Last Updated on June 17, 2024

import React, {useState} from "react";

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

    return (
                    <input type="text" placeholder="Enter your name" value={name}
                           onChange={event => {

                Result : Hello {name}


export default Info;

In most cases, it’s recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.