How to render two elements inside an AntD table cell?

Question

I want to add a title and a description in a same cell in AntD table. I have defined columns as below,

    const columns = [
        {
            title: 'Ref#',
            dataIndex: 'refNumber',
            key: 'refNumber',
            width: "20%",
        },
        {
            title: 'Description',
            key: 'description',
            dataIndex: 'description',
            render: description => (
                <>
                    {description.map(descriptions => {
                        return (
                            <Title level={5}>{descriptions.title}</Title>
                           
                        );
                    })}
                </>
            ),
        },
    ];

I have add following data to the table. I want to display two thins in one table. one is title and then the description.

const data = [
        {
            key: '1',
            refNumber: 'John Brown',
            description: {
                title: "Product Catalog",
                message: "Export - Need to change description column data in exported file as it includes product code",
            }
        },
    ];

    return (
        <>
            <div>
                {footerText + " version "}
                <a onClick={showModal}>
                    {version}
                </a>
            </div>
            <Modal
                title="Release Note"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}>
                <Table
                    columns={columns}
                    dataSource={data}
                    bordered={true}
                    pagination={false}
                />
            </Modal>
        </>
    );
});

but this gives following error

TypeError: description.map is not a function

Answer 1

Change the render of the description column to something like

render: (description) => (
    <>
      <Title level={5}>{description.title}</Title>
      <p>{description.message}</p>
    </>
  ) 

since description is not an array and so it does not have a map method