Skip to content
Get help on SlackWatch Sanity demo

Discussion on creating serializers/components for a custom object in portable text on the frontend.

25 replies
Last updated: Dec 5, 2022
I created a custom object that my portable text uses but now im a little lost of how i will create the serializers/components on the frontend. Any idea? Created a skeleton for how i want return to be.
Dec 5, 2022, 12:10 PM
An explanation on how this works could be enough aswell. Any help would be appreciated
Dec 5, 2022, 12:11 PM
This is a item inside the block array.
Dec 5, 2022, 5:50 PM
You'd want to pass 
children
to your 
listObject
component to allow it to access the values inside of the object. You'd then want to map over 
gridList
and return an 
li
with your 
listTitle
and 
listText
.
Dec 5, 2022, 6:59 PM
Could you explain with some dummy code?
Dec 5, 2022, 7:00 PM
 listObject: ({ children }) => (
       <div className="flex flex-col col-span-2">
         <ul>
         {gridList.map((list) =>)}
           {/* List Item */}
           <li>

            {/* List Title */}
             <h3>{}</h3>
             {/* List Text */}
             <p>{}</p>
           </li>

        </ul>

      </div>
     ),
Dec 5, 2022, 7:00 PM
Tried something like this
Dec 5, 2022, 7:03 PM
Can you try passing value instead?
Sidenote: when requesting help, it makes it easier for people to help you if you share your actual code instead of using screenshots. A community member made
this guide, which is quite helpful.
Dec 5, 2022, 7:07 PM
Yes, my bad.
Dec 5, 2022, 7:08 PM
Value instead of the children?
Dec 5, 2022, 7:08 PM
listObject: ({ children }) => (
      <div className="flex flex-col col-span-2">
        {children.map((oneItem) => (
          <div>
            {oneItem.title }
            {oneItem.text}
          </div>
        ))}

      </div>
    ),
Dec 5, 2022, 7:08 PM
Yeah. Then I think 
gridList
would be on 
value.gridList
Dec 5, 2022, 7:09 PM
listObject: ({ value }) => (
      <div className="flex flex-col col-span-2">
        {value.gridList.map((oneItem) => (
          <div>
            {oneItem.title }
            {oneItem.text}
          </div>
        ))}

      </div>
    ),

Dec 5, 2022, 7:09 PM
 listObject: ({ value }) => (
      <div className="flex flex-col text-white border h-52 col-span-2">
        {value.gridList.map((oneItem) => (
          <div>
            <h1>
              {oneItem.title }
            </h1>
            {oneItem.text}
          </div>
        ))}

      </div>
    ),
Dec 5, 2022, 7:12 PM
Progress! Atleast its not crashing
Dec 5, 2022, 7:13 PM
 listObject: ({ value, children }) => (
      <div className="flex flex-col text-white border h-52 col-span-2">
        {console.log(value, children)}

      </div>
    ),

☝️ what does that log?
Dec 5, 2022, 7:13 PM
Just checked the inspect, could be some typos!
Dec 5, 2022, 7:14 PM
Gives the same error as earlier
Dec 5, 2022, 7:15 PM
and this on value
Dec 5, 2022, 7:15 PM
listObject: ({ value }) => {
      console.log('%c%s', 'color: #86bf60', value.gridList.map((listItem) => listItem));

      return (
        <div className="flex flex-col text-white border h-52 col-span-2" />
      );
    },
When i tried this it atleast gives me some
Dec 5, 2022, 7:18 PM
OK! I think I have to replicate this myself to see what's going on. Can you copy and paste the list object schema?
Dec 5, 2022, 7:21 PM
export default {
    name: 'listObject',
    title: 'List',
    type: 'object',
    description: 'Created for about page',
    fields:[ 
        {
            name: 'gridList',
            title: 'List Item',
            type: 'array',
            of:[
                {
                    name: 'listItem',
                    title: 'Item in the list',
                    type: 'object',
                    fields: [
                        {
                            name: 'listTitle',
                            title: 'Title',
                            type: 'string',
                        },
                        {
                            name: 'listText',
                            title: 'Text',
                            type: 'text',
                            rows: 5,
                        }, 
                    ]
                }
            ]
        }
    ],
    preview: {
        select: {
         title: 'listTitle'
        },
        prepare(selection) {
            const {title} = selection
            return{
                title: title
            }
        }
       
      }
  };
Dec 5, 2022, 7:21 PM
🤞
Dec 5, 2022, 7:22 PM
Alright, this worked for me:
types: {
    listObject: ({ value: { gridList } }) => {
      return (
        <div className="flex flex-col text-white border h-52 col-span-2">
          <ul>
            {gridList.map(listItem => (
              <li>
                <h1>{listItem.listTitle}</h1>
                <p>{listItem.listText}</p>
              </li>
            ))}
          </ul>
        </div>
      );
    },
  },
Dec 5, 2022, 7:49 PM
Worked perfectly! Thank you so much 😄
Dec 5, 2022, 7:57 PM
Fantastic!
Dec 5, 2022, 8:13 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?

Categorized in