Use an HTML input text field with React

Learn how to use a HTML input text field with React and TypeScript.

Create a new React project

npx create-react-app react-textfield --template typescript

Replace src/App.tsx with the following

import * as React from 'react';
import './App.css';

function App() {
    const [name, setName] = React.useState('Peter');

    return (
        <div className="App">
            <div>Hello {name}!</div>

            <label htmlFor="name">Name</label>
            <input type="text" name="name" value={name} onChange={e => setName(e.target.value)}/>
        </div>
    );
}

export default App;

And there you have it, a beautiful React app which handles your input text field.

On HTML text field at developer.mozilla.org https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text