Django-React Blog Post Проблема с рендерингом текста блога в формате Markdown

Я создаю страницу для записи блога, используя django и react. У меня есть проблема с рендерингом текстового содержимого с использованием markdown. Вот код модели Django

class BlogPost(models.Model):
    longDescription = MarkupField(default_markup_type='markdown', null = True)

Я уже установил django-markupfield и следовал их документации и все вроде бы работает на бэкенде когда я делаю запрос get из react, я получаю такой ответ в виде JSON

{
    "longDescription": "<p>Hello World</p>"
}

и я пытаюсь показать текст без тегов p на моей странице, но реакция отображает это как строку Я пытался использовать JSON.parse(), чтобы разобрать его, но он показывает ошибку cross origin

Вот мой код реакции :

<ReactMarkdown  source= {JSON.parse(blogPost.longDescription)} className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto" />

от :

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Loader from '../components/Loader';
import Message from '../components/Message';
import { listBlogPostDetails } from '../actions/blogActions';
import ReactMarkdown from "react-markdown";

export default function BlogScreen({ match }) {
    const dispatch = useDispatch();
    const blogDetails = useSelector(state => state.blogDetails);
    const { loading, error , blogPost} = blogDetails


    useEffect(() => {
        dispatch(listBlogPostDetails(match.params.id))

    },[dispatch,match])
    return (
        <div className=" pt-1 mb-10">
            {
            loading? <Loader /> : error ? <Message>{error}</Message> :(
            <div className="relative mb-20 py-16 max-w-5xl mx-auto bg-gray-200 rounded-lg overflow-hidden">
                <figure className="flex items-center justify-center">
                        <img
                        className=" object-cover md:mt-10 mb-10 md:rounded-2xl "
                        src={blogPost.mainImage}
                        alt={blogPost.mainImageAlt}
                        width={500}
                        height={250}
                        />
                </figure>
                <div className="relative px-4 sm:px-6 lg:px-8">
                    <div className="text-lg max-w-prose mx-auto">
                        <span className="block text-base text-center text-green-600 font-semibold tracking-wide">
                        {blogPost.postCategory}
                        </span>
                     </div>
                    <ReactMarkdown  source= {JSON.parse(blogPost.longDescription)} className="mt-6 prose prose-indigo prose-lg text-gray-500 mx-auto" />
                </div>
            </div>
            )}  
        </div>
    )
}

Есть идеи или методы, как сделать это без проблем?

Вернуться на верх