PersistStateOnUnmount

In usetheform if a Field gets unmounted its value within the Form state gets cleared. Wrap your Field elements between the <PersistStateOnUnmount /> component to preserve the Fields values.

Basic usage

import { Form, PersistStateOnUnmount, Input } from 'usetheform'

root:{} 0 keys

() => {
  const [visible, toggle] = useState(false)
  return (
    <Form>
      <PersistStateOnUnmount>
        {!visible && (
          <Collection object name="user">
            <Input type="text" name="name" value="abc" />
            <Input type="text" name="lastname" value="foo" />
          </Collection>
        )}
        <Input type="text" name="other" />
      </PersistStateOnUnmount>
      <button type="button" onClick={() => toggle(prev => !prev)}>
        Toggle Collection
      </button>
    </Form>
  )
}

() => {
  const [visible, toggle] = useState(false)
  return (
    <Form>
      <PersistStateOnUnmount>
        {!visible && (
          <Collection object name="user">
            <Input type="text" name="name" value="abc" />
            <Input type="text" name="lastname" value="foo" />
          </Collection>
        )}
        <Input type="text" name="other" />
      </PersistStateOnUnmount>
      <button type="button" onClick={() => toggle(prev => !prev)}>
        Toggle Collection
      </button>
    </Form>
  )
}

PersistStateOnUnmount

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic usage

Basic usage