I am facing an issue with accessing properties of an inner object contained within another object.
import React from 'react';
import Sidebar from "../../../components/Sidebar/Sidebar";
import {useRouter} from "next/router";
const News = (data:any) => {
return (
<>
<div className="section section-main-page pt-0">
<div className="container">
<div className="section section-panel">
<div className="section-panel-content">
<h1>{data.state.name}/{data.title}</h1>
</div>
</div>
</div>
</div>
</>
);
}
export default News;
export const getServerSideProps = async (context:any) =>{
let data = await fetch(process.env.API_URL + '/' + context.query.state +'/news/' + 'test-news-article')
.then( r => r.json() )
console.log(data.state.name);
return {props: {data}}
}
Although the console log for data is working, nothing prints where the title should appear in the code above. Additionally, trying to access data.state.name results in an error.
Here is the provided data:
{
id: '1',
title: 'Test News Article',
summary: 'This is the summary',
state: { id: '9', name: 'National'}
}