Home
Support Forums

Content stored inside of json file doesn't get rendered correctly!

I have a json file which stores all of the content from the website.
I edited the text via the netlify cms (Rich Text/Markdown) image like added some line breaks, made it bold, italic etc. .
Those alteration are stored in the same json file as well.
But the problem with that is it’s not been recognized correctly (picture below).

Here is the code and the problem I’m getting:

image

image

Thanks in advance!

Hi @Nevzat-dev,

This appears to be working as expected to me. Your JSON object has some text and it’s rendering just like you have added it to the CMS - just to add, JSON doesn’t support text formatting. So CMS is doing the correct thing by adding the text as it is… now you need to add a Markdown parser which would parse the markdown from the JSON render it as HTML.

HI @hrishikesh,

thanks for replying to me. I understand what the problem is now but could you give me an example how I would implement such a markdown paser inside react to render it correctly to the DOM?

Thanks in advance!

You can use a library like this: react-markdown - npm and change your code to:

<div className="Editable-Content">
  <ReactMarkdown>{Content.title}</ReactMarkdown>
</div>

and so on…

1 Like

Thanks. It works now.