I am getting a response in text as follows
<span class='text-4xl'>description1</span>
And when i print it on screen:
import React,{useContext, useEffect} from 'react';
import blogsContext from '../context/blogsContext';
import { useParams } from 'react-router-dom';
export const Blog_read = (props) => {
const context = useContext(blogsContext)
const slug = useParams().slug
const {read_blog,readblog} = context
useEffect(()=>{read_blog(slug)},[readblog])
props.changetitle(readblog.title)
const title = readblog.title
const description = readblog.description
return (
<>
{title}
{description}
</>
);
};
Then it prints raw text as shown in
How to render it in html form
ThankYou
>Solution :
You can use this npm package, html-to-react.
import React,{useContext, useEffect} from 'react';
import { Parser } from "html-to-react";
import blogsContext from '../context/blogsContext';
import { useParams } from 'react-router-dom';
const HtmlToReactParser = new Parser();
export const Blog_read = (props) => {
const context = useContext(blogsContext)
const slug = useParams().slug
const {read_blog,readblog} = context
useEffect(()=>{read_blog(slug)},[readblog])
props.changetitle(readblog.title)
const title = readblog.title
const description = readblog.description
return (
<>
{title}
{HtmlToReactParser.parse(description)} /* This will do the job */
</>
);
};