0

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,

0

Browse other questions tagged or ask your own question.