Get help on Discord

Issue with preview form component not working in Sanity.io

13 replies
Last updated: May 14, 2024
i'm following along on https://www.sanity.io/docs/form-components#0319196f086b and i can't seem to get the preview form component to work, but the input component works just fine

defineField({
      name: 'productVideos',
      type: 'array',
      of: [
        defineArrayMember(
          defineType({
            name: 'video',
            type: 'object',
            fields: [
              defineField({
                type: 'string',
                name: 'url',
                validation: (rule) => rule.required(),
                components: {
                  input: VideoInput,
                  preview: VideoPreview,
                },
              }),
            ],
          }),
        ),
      ],
    }),
here are the referenced components


import {PreviewProps} from 'sanity'

export function VideoPreview(props: PreviewProps) {
  return <div style={{border: '1px solid green'}}>{props.renderDefault(props)}</div>
}

import {StringInputProps} from 'sanity'
import {Box, Card, Flex, TextInput} from '@sanity/ui'
import ReactPlayer from 'react-player'

export function VideoInput({elementProps, value}: StringInputProps) {
  return (
    <Card marginBottom={4}>
      <Flex direction="column">
        <Box flex={1}>
          <TextInput {...elementProps} />
        </Box>
        {value && (
          <Box display="flex" marginTop={4}>
            <ReactPlayer url={value} />
          </Box>
        )}
      </Flex>
    </Card>
  )
}
May 14, 2024, 5:22 PM
i would expect a green border around the preview component
May 14, 2024, 5:23 PM
but it shows the default one
May 14, 2024, 5:23 PM
and here is input component working
May 14, 2024, 5:24 PM
Hmm, the code looks right at first glance. What version of the Studio are you running?
May 14, 2024, 5:32 PM
  "dependencies": {
    "@prismicio/helpers": "^2.3.9",
    "@sanity/code-input": "^4.1.4",
    "@sanity/schema": "^3.41.2",
    "@sanity/ui": "^2.1.7",
    "@sanity/vision": "^3.41.2",
    "@tanstack/react-query": "^5.36.0",
    "@tanstack/react-query-devtools": "^5.36.0",
    "graphql-request": "^7.0.1",
    "groq": "^3.41.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-is": "^18.3.1",
    "react-player": "^2.16.0",
    "sanity": "^3.41.2",
    "sanity-plugin-documents-pane": "^2.3.0",
    "sanity-plugin-media": "^2.2.5",
    "styled-components": "^6.1.11",
    "zod": "^3.23.8"
  },
May 14, 2024, 5:41 PM
i just updated it too as i thought it might be a bug but even on newer update still same issue
May 14, 2024, 5:41 PM
Oh, I think I see the issue now. It looks like you’re specifying the component on the string field, not on the parent video field.
May 14, 2024, 5:57 PM
oh man lol
May 14, 2024, 5:58 PM
ok i think you're right, let me check
May 14, 2024, 5:58 PM
defineField({
      name: 'productVideos',
      type: 'array',
      of: [
        defineArrayMember(
          defineType({
            name: 'video',
            type: 'object',
            fields: [
              defineField({
                type: 'string',
                name: 'url',
                validation: (rule) => rule.required(),
                components: {
                  input: VideoInput,
                },
              }),
            ],
            components: {
              preview: VideoPreview,
            },
          }),
        ),
      ],
    }),
so that did what i wanted, i guess my question, should i do it this way? or should i move the custom input to the object? or just personal preference? i know this changes the input from 
StringInputProps
to 
ObjectInputProps
May 14, 2024, 6:03 PM
I personally would put both components on the 
video
object, but that’s just personal preference.
May 14, 2024, 6:24 PM
great, thanks
user M
May 14, 2024, 6:28 PM
You’re welcome!
May 14, 2024, 6:43 PM

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?