I am trying to fetch content from an API and show it in a page. It's working fine but when I am trying to view page source code it's not showing those content that I am getting from API. I am using Next.js for this project and the code that I have used is following. Is there anyone who can help help me to solve this issue?
import React, { Fragment, useEffect, useState } from 'react'
import { API_BASE_URL } from '../Config/Settings'
import SideBar from '../Layouts/SideBar'
import Link from "next/link"
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import axios from 'axios'
export const CmsPage = (props) => {
const [PageHtmlContent, setPageContent] = useState('');
const [PageTitle, setPageTitle] = useState('');
const [PageDescription, setPageDescription] = useState('');
const [SeoKeyword,setSeoKeyword]=useState('');
useEffect( async() => {
let body = {pageTypeCode:props.pageType,pageName:props.pageName};
const config = {
headers: {
'x-auth-token':"rpsite-public-token"
}
}
try {
const res= await axios.post(API_BASE_URL+'/api/cms/page',body,config);
// alert(res.data.content);
setPageContent(res.data.content);
setPageTitle(res.data.seoTitle);
setPageDescription(res.data.seoDescription);
setSeoKeyword(res.data.seoKeyword);
}
catch(err) {
setPageContent('<b>Something went wrong!</b>');
}
},[props]);
return (
<section class="inner-body-section">
<Head>
<title>{PageTitle}</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="keywords" content={SeoKeyword} />
<meta name="description" content={PageDescription}/>
</Head>
<div class="container">
<div class="row">
<div class="col-md-3">
<SideBar/>
</div>
<div class="col-md-9">
<div className="inner-body-content">
<div id="contentBlock" className="page-content" dangerouslySetInnerHTML={{__html:PageHtmlContent}}></div>
</div>
</div>
</div>
</div>
</section>
)
}
export default CmsPage;