import React from 'react';
import { HookedForm, useField } from 'hooked-form';

const StringField = ({ fieldId, label }) => {
  const [{ onChange }, { touched, error, value }] = useField(fieldId);
  const onInput = React.useCallback((e) => onChange(e.currentTarget.value), [onChange]);
  return (
    <label>
      {label + ' '}
      <input value={value} onChange={onInput} />
      {touched && error && <div>{error}</div>}
    </label>
  )
}

const App = () => {
  return (
    <HookedForm
      onSubmit={console.log}
      validateOnblur
      initialValues={React.useMemo(() => ({ name: '' }), [])}
      validate={values => values.name ? {} : { name: 'Required' }}
    >
      <h3>Hooked Form</h3>
      <StringField label="Name:" fieldId="name" />
      <input type="submit" value="Submit" />
    </HookedForm>
  )
}

render(<App />, document.body);