Function TextInput

packages/react/src/hooks/__tests__/useControllableState.test.tsx:47–59

({onChange, value: controlledValue}: {onChange?: (value: string) => void; value?: string})

})

function TextInput({onChange, value: controlledValue}: {onChange?: (value: string) => void; value?: string}) {
  const [value, setValue] = useControllableState({
    value: controlledValue,
    defaultValue: '',
    onChange,
  })

  function handleOnChange(event: React.ChangeEvent<HTMLInputElement>) {
    setValue(event.target.value)
  }

  return <input data-testid="input" type="text" onChange={handleOnChange} value={value} />
}

function ControlledTextInput() {
  const [value, setValue] = useState('')