Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Accessing field values in custom components using useFormValue hook

4 replies
Last updated: Jun 22, 2024
Regarding custom components and the useFormValue() hook.
I'm trying to access a value of the field "columnCount" in a custom component of the field "columnSet".

The console log shows undefined if I use
useFormValue(["columnCount"])
which is what'd make sense to me after reading the docs. It however shows the output of the second screenshot when I simply do
useFormValue([])
. I can get all columnCounts in there but this doesn't seem to be the way this is intended to be used, and I'm not sure how I'm supposed to get the one for the version currently being edited.
How do I get the value for the "columnCount" of the document I'm editing ?

Also providing a schema extract in case that helps.


🙏
Jun 22, 2024, 12:08 AM
That hook takes a path array, made up of the strings of the fields in that path. You can get the
path
that’s passed into your component’s
props
, then use
[path.slice(0, -1), 'columnCount']
.
Jun 22, 2024, 12:33 AM
Thanks
user M
.Makes it crash though:
Jun 22, 2024, 8:41 AM
The key in the path, that's getting passed to useFormValue is "93b70d933b92", so I'm very confused as to why it's complaining about "3857d88f355a".
Jun 22, 2024, 9:01 AM
Oh! I was missing a spread operator like so :
useFormValue([...path.slice(0, -1), 'columnCount'])

Thanks!
Jun 22, 2024, 9:07 AM

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.

Was this answer helpful?