What is a controlled component in React?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { useState } from 'react';

export default function Coupon() {
  const [code, setCode] = useState('');
  const valid = /^[A-Z0-9]{6}$/.test(code);

  return (
    <form onSubmit={e => { e.preventDefault(); console.log('apply', code); }}>
      <input
        value={code}
        onChange={e => setCode(e.target.value.toUpperCase())}
        placeholder="ABC123"
      />
      <button type="submit" disabled={!valid}>Apply</button>
      <button type="button" onClick={() => setCode('')}>Reset</button>
      {!valid && code.length > 0 && <p>Six characters, letters and digits.</p>}
    </form>
  );
}