React Functional Component

Functional components are the newest way of creating React components and managing state without using a class. They use the new hooks feature to manage state.

In the following example name is the state variable, setName is the function to call if you want to change state and useState("") is used to describe this variable as a state variable and initialise it to the empty string.

import React, { useState } from "react";

export default function PersonInfo() {
    const [name, setName] = useState("");
    return (
        <>
            <div>
                <p>Entered Name: {name}</p>
                <p>Name</p>
                <input
                    type="text"
                    onChange={(e) => {
                        setName(e.target.value);
                    }}
                />
            </div>
        </>
    );
}

To change state we call the setName method whenever there is a change. This is the same method we declared earlier in the function to control our state. For more information on managing lifecycle state of components please checkout the official documentation.