Needing help with a block component

[daring ridge]

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.
https://github.com/taunhealy/Bukela-Lodge

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 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

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

[brazen leaf]

Morning @daring ridge, what is the issue exactly, sorry

The component.tsx

?

[daring ridge]

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.

[brazen leaf]

And what are you getting now, no data?

[daring ridge]

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)

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```

[brazen leaf]

OH weird, this issue was happening yesterday

The ConcatSource thing

@worn yew Wasn't this a thing yesterday?

[daring ridge]

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