👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

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 ?
Jan 3, 2023, 2:04 PM
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
Jan 3, 2023, 2:56 PM
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
Jan 3, 2023, 2:56 PM
document and/or parent are still undefined in props if I console.log it
Jan 3, 2023, 2:57 PM
@sanity/cli version 2.35.0
Jan 3, 2023, 3:12 PM
Any suggestion ? That’s very weird because this way to access parent schema was ok before...
Jan 3, 2023, 5:18 PM
https://www.sanity.io/schemas/custom-input-component-with-webhook-8e9ec23a It’s exactly what this guy does to access parent document data no ?
Jan 3, 2023, 5:29 PM
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'
Jan 3, 2023, 7:18 PM
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 ?
Jan 4, 2023, 8:14 AM
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.
Jan 4, 2023, 4:42 PM
Thanks again for your answer
user M
!
Jan 5, 2023, 8:10 AM
This question/answer is super helpful.
user M
can you please point me in the direction of the docs for using the
useFormValue
hook?
Jan 12, 2023, 5:44 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.

Was this answer helpful?