Updating Database from Custom React Component State

[vagrant carbon]

In a collection I have this:

`  {
          name: 'active',
          label: 'active',
          type: 'checkbox',
          admin: {
            components: {
              Field: ProductActive,
            },
          },
        },`

My ProductActive is:

`export const ProductActive: React.FC<Props> = active => {
console.log(active, 'active ')

return (
<div>
<div>
<h3> Status new: {active.active}</h3>
</div>
</div>
)
}`

However when updating the props, the log is correct and active.active is also correct. How do I then set the Collections state to be correct so it updates my database accordingly ?

[frank pelican]

Original message from @twin matrix - Moved from #general message

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• React Hooks - useField
• React Hooks - useFormFields
• React Hooks - useAllFormFields - Updating other fields' values
• React Hooks - useForm
• Swap in your own React components - Custom providers - Getting the current language

[dapper barn]

@twin matrix Hmm, it's not saving?

Is it because you need to use useField and its proivided methods

or in this case, you want to update another field, right?

[twin matrix]

Perfect notchris. I however don't understand how to pass the value in. So e.g. value and setValue are as useState. And then the path is the path to the field, so in my case it should be const path = {name: "active"}

If that makes sense ?

[dapper barn]

Sorry, I think you want https://payloadcms.com/docs/admin/hooks#useformfields

[twin matrix]

Yes, okay. Makes sense, I get the field now. However how do I set the checkbox based on the props ?

`export const ProductActive: React.FC<Props> = props => {

const active = useFormFields(([fields]) => fields.active)

return (
<div>
<div>
<input type="checkbox" checked={props.active} />
<h3> Status new: {props.active} </h3>
</div>
</div>
)
}`

[dapper barn]

@twin matrix Sorry, back

Arent you trying to set a checkbox outside of the custom field?

[twin matrix]

My basic goal is actually just to add an active field to either true or false depending on what my stripeID returns.
ProductActive is getting props from my ProductSelect (stripe id). I'm not sure if there are any better ways to just add a new field to the Collection without doing like this ?

[dapper barn]

So to confirm

There is a field on your collection for stripeID

?