Issue with inserting an item into an array in a custom input component.
5 replies
Last updated: Oct 6, 2020
C
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, .And then supposedly firing in an
But the value is never updated.
import PatchEvent from 'part:@sanity/form-builder/patch-event'
onActionhandler here;
const handleAction = (field) => { const patches = [ { path: [], type: "setIfMissing", value: [] }, { type: "insert", items: [{ _type: field.name }], path: [-1] } ] PatchEvent.from(patches) }
Oct 6, 2020, 9:59 AM
S
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
S
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
S
So I figured out why nothing was happening and that because I forgot to wrap the
and the new error is,
PatchEventin the
onChangemethod — 🤦♀️. 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([])))
Cannot read property 'length' of undefined
Oct 6, 2020, 10:38 AM
S
I’ve made some progress on this. I think I have the patch right (maybe), currently my handler looks like this;
My error now is
and if I log the
const handleAction = (field) => { const patches = insert( [{ _type: field.name }], 'after' ) const patchFrom = PatchEvent.from(patches).prepend(setIfMissing([])) onChange(patchFrom) }
Attempt to apply insert patch to non-array value
typeof valueit does return
object.
Oct 6, 2020, 11:30 AM
S
Hallelujah, I’ve got this working… for a bit anyways. For anyone who is interested this is what my final handler looks like;
The item param will need some work, like a
const handleAction = (field) => { const patches = insert( [{ _type: field.name }], 'after', [-1] ) const patchFrom = PatchEvent.from(patches).prepend(setIfMissing([])) onChange(patchFrom) }
_keyetc 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
Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.