I'm making a static website using react, boot strap and tailwind. Whenever I try to render Service.js file in react app using react router, I'm getting below error.
Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property '_context' -> object with constructor 'Object'
--- property 'Provider' closes the circle
at JSON.stringify (<anonymous>)
In the below component 'Services.js', I want to create a grid where I'm getting the data from a custom JSON file which I have created. I have used map function to render the daata coming from JSON file.
Service.js:
import React from "react";
import services from "../services.json";
export default function Services() {
return (
<div className="container h-[100vw] ">
<div className="heading pt-16 text-center font-semibold">
<h2 className=" text-5xl">OUR SERVICES AT GLANCE</h2>
</div>
<div className="row pt-16 flex justify-center gap-5 h-[50rem] ">
{services &&
services.map((element) => {
return (
<div className="col-md-3 border-2 rounded-lg ">
<div className="heading text-center pt-7 font-bold text-3xl ">
<h1>{element.heading}</h1>
</div>
<div className="points text-left pt-7 text-2xl cursor-pointer text">
<ul className="">
<li> {element.p1}</li>
<li> {element.p2}</li>
<li> {element.p3}</li>
<li>{element.p4}</li>
<li> {element.p5}</li>
<li> {element.p6}</li>
<li> {element.p7}</li>
<li> {element.p8}</li>
</ul>
</div>
</div>
);
})}
</div>
</div>
);
}
services.json:
[
{
"heading": "Company Law & Secretarial Compliances",
"p1": "Incorporation of Private Companies/Public Companies, Section 8 (Not for Profit) Companies, One Person Companies (OPCs), Limited Liability Partnerships.",
"p2": "Conversion of Companies/LLPs.",
"p3": "Periodic/event based compliances as required under the Companies Act."
},
{
"heading": "Amalgamation, Merger, De-merger & Takeover",
"p1": "Mergers and Demergers.",
"p2": "Acquisitions and Takeovers.",
"p3": "Liquidation and Winding Up of Companies.",
"p4": "Financial Restructuring."
},
{
"heading": "Intellectual Property Rights",
"p1": "Searching for existing trademarks.",
"p2": "Drafting and filing of Trademark and Patent Applications.",
"p3": "Copyright Registration.",
"p4": "Drafting and filing of reply to examination report.",
"p5": "Other event-based filing and reporting."
},
{
"heading": "Labour Law/ESI and EPF Compliances",
"p1": "Registration under Shops & Establishments Act and advising on compliances thereunder.",
"p2": "Professional Tax registration.",
"p3": "Registration under ESI and EPF Acts.",
"p4": "Filing of returns with ESIC and EPFO.",
"p5": "Drafting and filing of reply to notices received from authorities."
},
{
"heading": "FEMA Compliances",
"p1": "Issue and Transfer of securities to/from Non-Residents.",
"p2": "Filing of Annual Return on Foreign Assets and Liabilities (FLA Return) with RBI."
},
{
"heading": "Venture capital and funding",
"p1": "Advising on structuring the transaction.",
"p2": "Conducting due diligence.",
"p4": "Drafting of term sheet, share purchase agreement and related documents.",
"p3": "Reporting and compliances."
},
{
"heading": "Audit and Assurance",
"p1": "Statutory & Internal Audit of Indian Companies & Foreign companies having operations in India.",
"p2": "Tax Audit.",
"p3": "System Audit.",
"p4": "Investigations & Special Audits as required by the management.",
"p5": "Establishing and Reviewing Internal Control Systems."
},
{
"heading": "Taxation",
"p1": "Filing of Returns for all entities viz., Individuals, HUF's, Firms, Companies, and Trusts.",
"p2": "Assessment proceedings.",
"p3": "Transfer Pricing Certification under the (Indian) Income Tax Act, 1961.",
"p4": "Representation before tax authorities.",
"p5": "GST advisory and compliance services.",
"p6": "TDS advisory and compliance services.",
"p7": "Customs related advisory services.",
"p8": "Reporting in Form15CA and 15CB."
},
{
"heading": "Regulatory compliances for Banks/NBFCs",
"p1": "Reviewing of MCA Documents including Articles of Association of the Company. ",
"p2": "Reviewing the Statutory Registers of the Company.",
"p3": "Reviewing the Book of Accounts and Financial Statements of the Company. ",
"p4": "Reviewing the taxation, operational and legal aspects of the Company.",
"p5": "Preparation of Due Diligence Reports and Search Reports. ",
"p6": "Central KYC registration of Individuals, Proprietorship, Partnership, and other legal entities. ",
"p7": "Securities Interest registration of entities under CERSAI"
},
{
"heading": "Other Services",
"p1": "Startup India Registration.",
"p2": "FSSAI Registration.",
"p3": "MSME Registration.",
"p4": "Contract drafting and legal advisory."
}
]
Whenever I try to render Service.js file in react app using react router,