Sync data changes to form

Gatsby
#1

Hello team,

Another noob question

I am trying to understand how to correctly setup form values to reflect/sync any subsequent updates

Consider following scenario.

Form is created with initial data {firstname: John, lastName: Smith}, then as a result of another action, the same state is updated with new values {firstname: John, lastName: Smith}

I was trying to use second parameter in useForm to pass the values in. While it worked in applying the updates, whenever I try to update one filed in form by hand, any updates I made to the second filed reverted.

Attached demo demonstrates issue

When application starts, page data is set to {firstname: John, lastName: Smith}

After 5 seconds, it changes to {firstname: Scobby, lastName: Doo}

Open tina editor and change First Name to : Spider

Try changing Second Name to : Man

Observe First Name has changed back to Scobby

I also tried initialValues to load initial state but didn’t find any way to apply subsequent updates. I am aware of loadInitialValues, didn’t know how to use it to apply updates that could happen any time, for example as a result of another action

I am sure I am missing something fundamental and any help is much appreciated

#2

Hey @Chintana, the form will track all of the field value changes as they are edited so you don’t need to store initial values in component state. If you want to persist changes, you’ll need to set up a backend (Git, for example). If you need to load data from an external source, do this with loadInitialValues.

The refactored code below should provide the basic behavior you’re looking for.

const Index = () => {
    
  const formConfig = {
    id: `demo`,
    label: 'demo',
    initialValues: {
      firstName: "John",
      lastName: "Smith"
    },
    onSubmit: (values) => {
        console.dir(values)
    },
    fields: [                    
      {
        name: 'firstName',  
        label: 'First name',             
        component: 'text',          
      },
      {
        name: 'lastName',
        label: 'Last name',
        component: 'textarea',      
      },
    ]
  }

  const [modifiedValues, form] = useForm(formConfig)

  usePlugin(form)
  
  return (
      <>
        <h3>First Name</h3>
        <div>{modifiedValues.firstName}</div>

        <h3>Last Name</h3>
        <div>{modifiedValues.lastName}</div>
      </>
  )
}
#3

@kendall, many thanks for the quick reply. The values used to setup the form will change outside of the form based on other actions (example click of button). What would be the best way to make sure they stay sync? I have used both initialVales and values in useForm’s second parameter to achieve what I want. Is this the correct way ?

const Index = () => {

  const [ pageData, setPageData ] = useState({
    firstName: "John",
    lastName: "Smith"
  })
    
  const formConfig = {
    id: `demo`,
    label: 'demo',
    initialValues: pageData,
    onSubmit: (values) => {
        console.dir(values)
    },
    fields: [                    
      {
        name: 'firstName',  
        label: 'First name',             
        component: 'text',          
      },
      {
        name: 'lastName',
        label: 'Last name',
        component: 'textarea',      
      },
    ]
  }

  const [modifiedValues, form] = useForm(formConfig, { values : { ...pageData } })

  usePlugin(form)
  
  return (
      <>
        <h3>First Name</h3>
        <div>{modifiedValues.firstName}</div>

        <h3>Last Name</h3>
        <div>{modifiedValues.lastName}</div>
        
        <button onClick={() => {
          setPageData({
          firstName: "Scobby",
          lastName: "Doo"
        })}}>Change values</button>
      </>
  )
}
#4

I see, you could try using the useUpdateFormValues hook to handle this update.

<button onClick={() => 
  (useUpdateFormValues(form,  {
    firstName: "Scobby"
    lastName: "Doo"
  }))
}>Change values</button>
#5

@kendall Many thanks for your continues support. I see useUpdateFormValues is not exported, so can I use the core functionality of useUpdateFormValues like

        <button onClick={() => {
            form.updateValues({
                firstName: "Scobby",
                lastName: "Doo"
            })
        }}>Change values</button>

Also, is there any doco on all methods on from object like updateValues

Cheers

#6

Nice, sorry yeah updateValues is right :ok_hand:t2:

I thought there were docs but I can’t seem to find them! Good catch, I’ll note that we need to add those. For now that source file will be the best reference.

1 Like