"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Get the resources you need to start building today
Microsoft chose Payload to tell the world about AI.
display blog post using MUI?
Sorry if this is a stupid question... Given that my blog post is being fetched from an api endpoint as an array of objects with various children for "text", "type", "url", am I suppose to create components for each of these children? For example, components for heading, paragraph, links, images, ul, ol, etc, then map over the content array and return the relative component?
I think the Payload Docs suggest using a helper method of some kind that converts each rich text "node", but for my personal website, I opted to create a "ContentRichText" component that does the same thing:
https://github.com/r3pwn/r3pwn-com-next/blob/main/components/ContentRichText.tsxOriginally I mapped over the content array within a mui typography component. For each type I turned the relevant mui component. However, I was running into hydration issues in Next because I was returning a List component within a Typography component for type: 'ol'. The specific error was, "Expected server HTML to contain a matching <ul> in <p>."
I've looked at your code and parsing the data recursively seems much better. I've tried to emulate your method but have run into more problems. Here's a screenshot of the recursive component I've created based on your code
I can't workout why this doesn't work. The content prop is undefined in the TextParser component. Any idea where I'm going wrong with this? Thanks
Hmm... Can you
console.logthe value of "content" so you can see what type it is when it throws that error?
It's just a small test project test out payload
I think that might actually be the right idea. I did notice that some of the content nodes don't have a type, but do have children, so you may need to update the component to handle that scenario
When installing payload I opted for the preconfigured blog template. Is there a specific reason why some content nodes don't have a type?
It has fried my brain why this code won't work. The only children that have no type are objects with a text property. This is being handled specifically with a if statement checking !node.type. Also, I would have thought a child with no type would trigger the default case. I've hit a wall with this. The only way I can get this kinda working is to map over the content array within a parent Typography component and return the relevant mui component based on node type. However, this requires multiple nested maps and creates a hydration error because the mui List component can't be a child of a Typography component.
I've got it working. I didn't understand the role of slate in this process.
I'm glad you got it working!
Can you explain how did you fix this? I have similar code but can't get the node.type, just undefined... Thanks!
Star
Discord
online
Get dedicated engineering support directly from the Payload team.