Structured Content 2022: Join our conference to explore fresh perspectives on content and digital experiences →

retrieve the values of sibling fields to use in rendering an inputComponent

3 replies
Last updated: Feb 7, 2021

How can I retrieve the values of sibling fields to use in rendering an inputComponent? For example I want to render the text value but with the font specified in the fontSize sibling field.

Feb 7, 2021, 8:53 PM

One thing I tried to do was to do a client.fetch query but the problem here is that I could find any kind of id being passed in a a prop in my “TextInput” component, so it wouldn’t be possible to corroborate this data to the data queried from the api.

Feb 7, 2021, 8:57 PM

This is a view of the input component as of now. I cropped the picture below where I put in my projectid and api key for obvious reasons.

Feb 7, 2021, 8:58 PM

Hi Matthew, could you try wrapping your component in

withDocument()
? As follows:
import { withDocument } from 'part:@sanity/form-builder'

...

const TextInput = (props) => {
 ...
}

export default withDocument(TextInput)
This should give you access to a
document
prop that contains your document's content.

Feb 7, 2021, 9:59 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.