Skip to content
Get help on SlackWatch Sanity demo

Issue with inserting an item into an array in a custom input component.

5 replies
Last updated: Oct 6, 2020
Can anyone help me here? I’m trying to insert an item into an array in a custom input component but nothing happens. I’m importing PatchEvent like this, 
import PatchEvent from 'part:@sanity/form-builder/patch-event'
.And then supposedly firing in an 
onAction
handler here;
const handleAction = (field) => {
    const patches = [
      { path: [], type: "setIfMissing", value: [] }, 
      {
        type: "insert",
        items: [{ _type: field.name }],
        path: [-1]
      }
    ]

    PatchEvent.from(patches)
}
But the value is never updated.
Oct 6, 2020, 9:59 AM
Some additional info that might be useful. I know the event fires because I can log out field. I get no error in Sanity dashboard or the console.
Oct 6, 2020, 10:04 AM
Also, the handler is attached to an imported Sanity dropdown button,
<Button
  kind="simple"
  items={type.of}
  onAction={(field) => handleAction(field)}
  inverted={true}
>
  Add
</Button>
Oct 6, 2020, 10:09 AM
So I figured out why nothing was happening and that because I forgot to wrap the 
PatchEvent
in the 
onChange
method — 🤦‍♀️. So now I do get an error. My updated PatchEvent looks like this,
onChange(PatchEvent.from(insert({items: [{ _type: field.name, path: [-1] }]})).prepend(setIfMissing([])))
and the new error is, 
Cannot read property 'length' of undefined
Oct 6, 2020, 10:38 AM
I’ve made some progress on this. I think I have the patch right (maybe), currently my handler looks like this;
const handleAction = (field) => {
    const patches = insert(
      [{ _type: field.name }],
      'after'
    )
    const patchFrom = PatchEvent.from(patches).prepend(setIfMissing([]))
  
    onChange(patchFrom)
}
My error now is 
Attempt to apply insert patch to non-array value
and if I log the 
typeof value
it does return 
object
.
Oct 6, 2020, 11:30 AM
Hallelujah, I’ve got this working… for a bit anyways. For anyone who is interested this is what my final handler looks like;
const handleAction = (field) => {
    const patches = insert(
      [{ _type: field.name }],
      'after',
      [-1]
    )
    const patchFrom = PatchEvent.from(patches).prepend(setIfMissing([]))
  
    onChange(patchFrom)
  }
The item param will need some work, like a 
_key
etc but otherwise this is now inserting an item on to the end of 
value
.
Oct 6, 2020, 12:56 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in