const App: React.FC = () => {

  const initialState = {
    id: '',
    name: '',
    password: '',
    termsAndConditions: false,
  };
  const {
    state,
    onUpdateValue, // Update a value from the dictionary
    onClearValue   // Remove a value from the dictionary
    onClear        // Remove all values from the dictionary
  } = useDictionary(initialState);

  const onSubmit = useCallback((event: React.FormEvent) => {
    event.preventDefault();
    console.log('Create User!', state);
  }, [state]);
  
  return (
    <form onSubmit={onSubmit}>
      <label>
        Document:
        <input
          type="text"
          value={state.id}
          onChange={(e) => onUpdateValue('id', e.target?.value)}
        />
      </label>
      <label>
        Name:
        <input
          type="text"
          value={state.name}
          onChange={(e) => onUpdateValue('name', e.target?.value)}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          value={state.password}
          onChange={(e) => onUpdateValue('password', e.target?.value)}
        />
      </label>
      <label>
        Accept terms and conditions:
        <input
          type="checkbox"
          checked={state.termsAndConditions}
          onChange={(e) => onUpdateValue('termsAndConditions', e.target?.checked)}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}