Get help on Discord

Accessing parent schema values in custom input components changed, resolved with withParent HOC or useFormValue hook.

12 replies
Last updated: Jan 12, 2023
Hello Sanity community ! I’ve made some custom input components, which were working well until now. But now when I try to access to parent document schemas types and values by props in these custom input components , parent key in props remains undefined ( that was not the case before ). Something has changed in the way to get access to parent document schema values ?
import React from 'react'
export const MyCustomInput = React.forwardRef((props, ref) => {
  const { parent } = props

  // Access the parent schema values
  const parentValue1 = parent.parentValue1
  const parentValue2 = parent.parentValue2

  // render the input component
  return (
    <div>
      <input type="text" />
    </div>
  )
}

export default MyCustomInput
import React from 'react'

export const MyCustomInput = React.forwardRef((props, ref) => {
  const { document } = props

  // Access the parent schema values
  const parentValue1 = document.parentValue1
  const parentValue2 = document.parentValue2

  // render the input component
  return (
    <div>
      <input type="text" />
    </div>
  )
}

export default MyCustomInput
document and/or parent are still undefined in props if I console.log it
@sanity/cli version 2.35.0
Any suggestion ? That’s very weird because this way to access parent schema was ok before...
https://www.sanity.io/schemas/custom-input-component-with-webhook-8e9ec23a It’s exactly what this guy does to access parent document data no ?
The API changed here a month or two ago. You can now access it by wrapping the component in a withParent HOC.
import {withParent} from 'part:@sanity/form-builder'
Hello
user M
, thanks a lot for your answer ! I managed to solve my issue by using your suggestion with High Order Component withParent/withDocument from ‘part:@sanity/form-builder’. But honestly, I searched hard to find how this can be used. I didn’t found many working examples neither documentation that explains that change nor how to use it. Perhaps I didn’t go deep enough in every results of my search, but what I mean is that, I guess, it is poorly referenced. 2 questions so : have you some links/docs to share that explain that change and how to use it ? And, is this “New way” to use custom input components concerns also Sanity V3 ?
Since that version is now considered deprecated, it's definitely not as obvious in the docs where these are. The withDocument and withParent HOCs have been in use for about 3 or 4 months prior to the release of V3. In V3, you'll use a 
useFormValue
hook.
Thanks again for your answer
user M
!
This question/answer is super helpful.
user M
can you please point me in the direction of the docs for using the 
useFormValue
hook?

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.

Get started for freeExplore the demo

Was this answer helpful?