Accessing parent schema values in custom input components changed, resolved with withParent HOC or useFormValue hook.
12 replies
Last updated: Jan 12, 2023
J
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
J
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 MyCustomInputJan 3, 2023, 2:56 PM
J
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 MyCustomInputJan 3, 2023, 2:56 PM
J
document and/or parent are still undefined in props if I console.log it
Jan 3, 2023, 2:57 PM
J
@sanity/cli version 2.35.0
Jan 3, 2023, 3:12 PM
J
Any suggestion ? That’s very weird because this way to access parent schema was ok before...
Jan 3, 2023, 5:18 PM
J
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
J
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
useFormValuehook.
Jan 4, 2023, 4:42 PM
J
Thanks again for your answer
user M
!Jan 5, 2023, 8:10 AM
S
This question/answer is super helpful.
user M
can you please point me in the direction of the docs for using the useFormValuehook?
Jan 12, 2023, 5:44 PM
S
Nvmd, found this! https://www.sanity.io/docs/migration-cheat-sheet#76d45626ec04
Jan 12, 2023, 6:01 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.