Hi. I'd like to render the selected rooms data, such as title, description, images, price. No styling at this point.
What should my Component code be, or can you please provide keywords to search to learn how to do it, if you're not willing to write out the code.
Rooms block config:
import React from 'react';
import { Block } from 'payload/types';
export const Rooms: Block = {
slug: 'rooms-block',
labels: {
singular: 'Rooms Block',
plural: 'Rooms Blocks',
},
fields: [
{
name: 'selectRooms',
type: 'relationship',
relationTo: 'rooms',
hasMany: true,
},
],
};
the incorrect Rooms/Component.tsx
import React from 'react';
import NextImage from 'next/image';
import RichText from '../../components/RichText';
import classes from './index.module.css';
import sizes from './sizes.json';
import { MediaType } from '../../collections/Media';
import { Rooms } from './Config';
export type RoomsBlockProps = {
selectRooms: Array<any>;
};
export const RoomsBlock: React.FC<RoomsBlockProps> = ({ selectRooms }) => {
return (
<div>
{selectRooms.map((room) => (
<div key={room._id}>
<h2>{room.title}</h2>
<img src={room.featuredImage.url} alt={room.featuredImage.alt} />
<p>{room.description}</p>
<p>Price: {room.price}</p>
</div>
))}
</div>
);
};
collection/Room.ts
import { CollectionConfig } from 'payload/types';
const Room: CollectionConfig = {
slug: 'rooms',
fields: [
{
name: 'title',
label: 'Room Title',
type: 'text',
required: true,
},
{
name: 'featuredImage',
label: 'Featured Image',
type: 'upload',
relationTo: 'media',
required: true,
},
{
name: 'images',
label: 'Images',
type: 'array',
minRows: 1,
fields: [
{
name: 'image',
label: 'Image',
type: 'upload',
relationTo: 'media',
required: true,
},
],
},
{
name: 'description',
label: 'Description',
type: 'richText',
required: true,
},
{
name: 'price',
label: 'Price',
type: 'number',
required: true,
},
],
};
export default Room;
https://github.com/taunhealy/Bukela-Lodge
Morning @taun2160, what is the issue exactly, sorry
The component.tsx
?
Good morning (3pm my side). Yea, I don't know how to call the selected rooms data and render it. When the admin chooses the block, it will run the component and render it right? Which is typically rendered to a page that the block is added to?
Those are side questions, my main challenge is the component code.
And what are you getting now, no data?
At the moment it's displaying a blank page and the console is returning the error:
_error.js:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)
PS C:\git\2160\Bukela-Lodge> yarn dev
yarn run v1.22.19
$ ts-node server.ts
[13:28:16] INFO (payload): Connected to Mongo server successfully!
[13:28:16] INFO (payload): Starting Payload...
info - Loaded env from C:\git\2160\Bukela-Lodge\.env
webpack built d9c26d2e97ce7dfe2c9b in 17891ms
webpack compiled successfully
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource
<w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource
OH weird, this issue was happening yesterday
The ConcatSource thing
@jmikrut Wasn't this a thing yesterday?
PS C:\git\2160\Bukela-Lodge> yarn dev
yarn run v1.22.19
$ ts-node server.ts
[13:32:59] INFO (payload): Connected to Mongo server successfully!
[13:32:59] INFO (payload): Starting Payload...
info - Loaded env from C:\git\2160\Bukela-Lodge\.env
event - compiled client and server successfully in 5.3s (160 modules)
NextJS started
Server listening on 3000...
webpack built d9c26d2e97ce7dfe2c9b in 16987ms
webpack compiled successfully
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource
<w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource
wait - compiling / (client and server)...
event - compiled client and server successfully in 972 ms (296 modules)
wait - compiling /[...slug] (client and server)...
event - compiled client and server successfully in 672 ms (297 modules)
I closed Vscode, my browser, re-opened VSCode and it's working again. Error is still there, but for now it's up. When I run yarn dev again I think that's when it corrupts something and doesn't refresh the server. I don't know.
The Rooms page is loading the image and title that I assume comes from the Room collection
import React from 'react';
import NextImage from 'next/image';
import RichText from '../../components/RichText';
import classes from './index.module.css';
import sizes from './sizes.json';
import { MediaType } from '../../collections/Media';
import { Rooms } from './Config';
export type RoomsBlockProps = {
selectRooms: Array<any>;
};
export const RoomsBlock: React.FC<RoomsBlockProps> = ({ selectRooms }) => {
return (
<div>
{selectRooms.map((room) => (
<div key={room._id}>
<h2>{room.title}</h2>
<img src={room.featuredImage.url} alt={room.featuredImage.alt} />
<p>{room.description}</p>
<p>Price: {room.price}</p>
</div>
))}
</div>
);
};
Where is it destructuring { selectRooms } from? I don't need getStaticSideProps within the component because that's being called in the slug to render the slugs/pages that contain the blocks? Something like that?
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.