Controlled Inputs

Example

The input value comes from state and every keystroke updates state. React is the "single source of truth".

import { useState } from 'react';

export default function App() {
  const [name, setName] = useState('');
  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
      <p>Hello {name || 'stranger'}</p>
    </div>
  );
}

Result