useFormValue quest: trouble accessing form values in custom component
I can't access the Slack thread you linked, but I can help you troubleshoot common useFormValue issues! Here are the most frequent gotchas and solutions:
Common Issues & Solutions
1. Context Error: "FormBuilder: missing context value"
This happens when you try to use useFormValue outside the form builder context. The hook only works inside custom input components, not in document actions, structure builders, or standalone components.
// ā Won't work - outside form context
export const myDocumentAction = (props) => {
const value = useFormValue(['field']) // Error!
}
// ā
Works - inside custom input component
export const MyInput = (props) => {
const value = useFormValue(['field']) // Good!
return props.renderDefault(props)
}2. Path Array Syntax
The hook requires an array path, even for top-level fields:
// ā Wrong
const value = useFormValue('myField')
// ā
Correct
const value = useFormValue(['myField'])
// ā
For nested fields
const value = useFormValue(['parent', 'child', 'field'])
// ā
For the entire document
const document = useFormValue([])3. Accessing Values in Array Items
When working with array items, you need to use the path prop to navigate correctly:
export const CustomArrayItem = (props) => {
const { path } = props
const parentPath = path.slice(0, -1) // Remove current item index
// Access sibling field in same array item
const siblingValue = useFormValue([...parentPath, 'siblingField'])
}4. Undefined/Null Values
useFormValue returns undefined if the field doesn't exist or hasn't been set yet. Always handle this:
const MyInput = (props) => {
const otherField = useFormValue(['otherField'])
useEffect(() => {
if (otherField) { // Guard against undefined
// Do something with the value
}
}, [otherField])
}5. Reactive Updates
The hook automatically re-renders when the watched field changes, so use it in useEffect dependencies:
const MyInput = (props) => {
const category = useFormValue(['category'])
const [options, setOptions] = useState([])
useEffect(() => {
// This runs whenever category changes
fetchOptionsForCategory(category).then(setOptions)
}, [category]) // Include in dependencies
}Quick Debugging Checklist
- Are you using
useFormValueinside a custom input component? - Is your path an array?
['field']not'field' - Are you handling
undefinedvalues? - For Studio v3, did you import from
'sanity'not'@sanity/form-builder'?
If you can share the specific error message or describe what's not working, I can give you more targeted help! Common symptoms are: values showing as undefined, component not re-rendering, or context errors.
Show original thread11 replies
Sanity ā Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.