Form

Simple form implementation

import React, { useCallback, useState } from 'react';
import {
  reactExtension,
  Form,
  TextField,
} from '@shopify/ui-extensions-react/admin';

export default reactExtension("admin.product-details.block.render", () => <App />);

function App() {
  const [value, setValue] = useState("");
  const [error, setError] = useState('');

  const onSubmit = useCallback(
    async () => {
      // API call to save the values
      const res = await fetch('/save', {method:'POST', body: JSON.stringify({name: value})});
      if (!res.ok) {
        const json = await res.json();
        const errors = json.errors.join(',');
        setError(errors);
      }
    },
    [value]
  );

  const onReset = useCallback(async () => {
     // Reset to initial value
     setValue('')
     // Clear errors
     setError('')
  }, []);

  const onInput = useCallback((nameValue) => {
    if (!nameValue) {
      setError("Please enter a name.");
    }
  }, [])

  // Field values can only be updated on change when using Remote UI.
  const onChange = useCallback((nameValue) => {
    setValue(nameValue);
  }, [])


  return (
    <Form id="form" onSubmit={onSubmit} onReset={onReset}>
      <TextField label="name" value={value} onInput={onInput} onChange={onChange} error={error} />
    </Form>
  );
}

import {
  extend,
  Form,
  TextField,
} from '@shopify/ui-extensions/admin';

extend('admin.product-details.block.render', (root) => {
  let name = '';

  const textField = root.createComponent(
    TextField,
    {
      label: 'name',
      value: name,
      onChange: (value) => {
        textField.updateProps({value});
        name = value;
      },
    }
  );

  const onSubmit = async () => {
    // API call to save the values
    const res = await fetch('/save', {method:'POST', body: JSON.stringify({name})});
    if (!res.ok) {
      const json = await res.json();
      // The Host can catch these errors and do something with them.
      throw Error(`There were errors: ${json.errors.join(',')}`);
    }
  };

  const onReset = async () => {
    name = '';
  };

  const form = root.createComponent(
    Form,
    {onSubmit, onReset}
  );

  form.appendChild(textField);
  root.appendChild(form);
});