#How do I only save changes to a custom component's value on save? [v3.0.0-beta.20]

11 messages · Page 1 of 1 (latest)

minor raft
#

Hi,

I'm trying to create my first custom component on the v3 beta. if I use useField(), changes are saved on every use of setValue. I'm guessing I need to use React's useState() instead, but I can't work out how to then save the changes when hitting the document's 'Save' button.

limpid patioBOT
drifting gorge
#

@minor raft Hey, can you post your component code please?

#

Ill check it out

minor raft
#

Thanks @drifting gorge .

src/fields/TestField/Testfield.tsx:

'use client';
import {useField} from '@payloadcms/ui/forms/useField'

function TestField({path}) {
  const {value, setValue} = useField({path})
  const onClick = function () {
    setValue(value + '*');
  }
  return (
    <div>
      <button onClick={onClick}>Click me</button><p>{value}</p>
    </div>
  )
}

export default TestField

src/fields/TestField/index.ts:

import Component from './TestField'

export const TestField = (name) => {
  return [{
    name,
    type: 'text',
    admin: {
      components: {
        Field: Component,
      },
    },
  }]
}

src/collections/Examples/index.ts:

import type {CollectionConfig} from 'payload/types'
import {TestField} from '@/fields/TestField'

export const Examples: CollectionConfig = {
  slug: 'examples',
  admin: {
    useAsTitle: 'name',
  },
  fields: [
    {
      name: 'name',
      type: 'text',
      required: true,
    },
    ...TestField('columname')
  ],
}
drifting gorge
#

@minor raft Can you add "type='button'" to your button

#

Any buttons without that type will be treated as Submit buttons IIRC

#

Which will submit the doc through the normal means

minor raft
#

🤦‍♂️ Thank you, much appreciated!

limpid patioBOT
drifting gorge
#

Did that solve it?