How to render data from a text editor in a next.js web page without template tags

Hello, in this post I am going to show you how to display data gotten from a text editor in your next.js website. Normally when we attempt to render data from a text editor in our web page we get the data but it renders with the template tags as shown below.

We don't want out website to look like that so in this post i'll show you how to display the data without the template tags being rendered like this

Please note i am working with ckeditor for this post.

Alright lets begin.

What you have now.

Am assuming you are trying to render the text editor data in your code within jsx like this

<div>
  {data}
</div>

whereby data is the data gotten from the text editor, this method above will render the data along with the template tags. For you to render it without the template tag change your code to this

<div dangerouslySetInnerHTML={{ __html:data}}></div>

The property "dangerouslySetInnerHTML" is used to directly set html element content in a react or next.js application. With this code our page should render the text editor properly without the template tags.

Please note, if you are only using the text editor in the backend and only you and your team have access to write content with it, then this should be okay, but if the text editor is being populated with content from the frontend from random users like maybe in the comment section of your page, then i highly advise you to clean the data first before you allow it to render on your page to prevent cross-site scripting (xss) attack. Read our How to clean text editor data on next.js post to learn how its done.

Conclusion

We have been able to render our data from a text editor without any template tags in our next.js webpage. As always thanks for reading. You can share your thoughts about the post in the comment section below.