Netlify CMS custom preview problem dangerouslySetInnerHTML={{ __html: widgetFor('body') }} shows [object Object] in /admin preview

Question

i have problem with this component:

import CMS from 'netlify-cms-app'
import React from 'react'
import Article from './preview-templates/Article'
const ArticlePreview = ({ entry, widgetFor }) => {
    console.log(widgetFor('body'), 'body!!!!');

    return (
        <Article title={entry.getIn(['data', 'title'])} >
            <div dangerouslySetInnerHTML={{ __html: widgetFor('body') }} />
        </Article>
    )
}

CMS.registerPreviewTemplate('Aktualnosci', ArticlePreview)

   <div dangerouslySetInnerHTML={{ __html: widgetFor('body') }} />

gives me [object,Object] in preview instead of markdown preview.

here is my config.yml:

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to master)

media_folder: static/img
public_folder: /img

collections:
  - name: 'Aktualnosci'
    label: 'Aktualnosci'
    folder: 'src/pages/aktualnosci'
    create: true
    slug: '{{slug}}'
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "post"}
      - {label: "Tytuł", name: "title", widget: "string"}
      - {label: "Data publikacji", name: "date", widget: "datetime"}
      - {label: "Opis", name: "description", widget: "text"}
      - {label: "Ujawnic posta?", name: "featuredpost", widget: "boolean"}
      - {label: "Obrazek", name: "featuredimage", widget: image}
      - {label: "Treśc calkowita", name: "body", widget: "markdown"}
      - {label: "Tagi", name: "tags", widget: "list"}
  

here is how it looks like

Answer 1

Seems widgetFor doesn't cater dangerouslySetInnerHTML as attribute well.

Try to do like this

        <Article title={entry.getIn(['data', 'title'])} >
            <div>
                {content}
            </div>
        </Article>