Not able to iterate over object using map

Question

I am trying to render a table using a data collection "Posts". I want to use the map method returns a new array by applying the callback function on each element of an array, while the forEach method doesn’t return anything. Could someone shed a light how to print the following collection?. Thanks

0:
fields: {title: {…}, description: {…}}
metadata: {tags: Array(1)}
sys: {space: {…}, id: '3Nkel8Pkog5UK3r4DPFD0b', type: 'Entry', createdAt: '2022-05-16T13:43:08.257Z', updatedAt: '2022-05-18T09:21:02.302Z', …}
[[Prototype]]: Object
1: {metadata: {…}, sys: {…}, fields: {…}}
2: {metadata: {…}, sys: {…}, fields: {…}}
3: {metadata: {…}, sys: {…}, fields: {…}}
4: {metadata: {…}, sys: {…}, fields: {…}}
5: {metadata: {…}, sys: {…}, fields: {…}}
6: {metadata: {…}, sys: {…}, fields: {…}}
7: {metadata: {…}, sys: {…}, fields: {…}}
length: 8
[[Prototype]]: Array(0)

{
"title": {
    "en-US": "Test Metadata "
},
"description": {
    "en-US": {
        "data": {},
        "content": [
            {
                "data": {},
                "content": [
                    {
                        "data": {},
                        "marks": [],
                        "value": "Reference Description",
                        "nodeType": "text"
                    }
                ],
                "nodeType": "paragraph"
            }
        ],
        "nodeType": "document"
    }
}

}

import { Table } from '@contentful/f36-components';
import { PageExtensionSDK } from '@contentful/app-sdk';
import { useCMA, useSDK } from '@contentful/react-apps-toolkit';

const Page = () => {
  const sdk = useSDK<PageExtensionSDK>();
  const cma = useCMA();
  const [posts, setPosts] = useState([])

  useEffect(()=> {
    cma.entry.getMany({
      query:{
        content_type: 'title'
      },        
    })
    .then((data:any) => {
      if (data.items.length) { setPosts(data.items) }
    })
  });

  // posts.forEach((key, index) => {
  //   console.log('${key}: ${posts[key]}');
  // });

  return(
      <Table className="postTable">
          <Table.Head>
            <Table.Row>
              <Table.Cell>Entry Name</Table.Cell>
              <Table.Cell>Last Activity</Table.Cell>              
            </Table.Row>
          </Table.Head>
          {
            <Table.Body>
              {posts.map((post:any) => {
                return (
                  <Table.Row key={post['title']}>
                    <Table.Cell>{post['description']}</Table.Cell>
                    <Table.Cell>{post['description'] || "Column 2"}</Table.Cell>
                  </Table.Row>
                );
              })}

          </Table.Body>          
          }
      </Table>
  )
};

export default Page;

Answer 1

Dont treat "post" inside map as an array because it is not. It's an object. Try something like this:

    {posts.map((post) => {
            return (
              <Table.Row key={post.title}>
                <Table.Cell>{post.description}</Table.Cell>
                <Table.Cell>{post.description || "Column 2"}</Table.Cell>
              </Table.Row>
            );
          })}