How to use local json file in react js?

Access JSON file in react: you want to access JSON data in react so you can use simply as an external file and you will call object name with map() method. Here I have given simple POC for the JSON implementation as below code: 

First, you need to create a simple react project and then create some react component and call as below code:

Folder structure as below screenshot:

topnavdbdata.json

{

    "taxonomy": [

        {

            "id": 1,

            "name": "Home",

            "url": "/home",

            "content": "home Lorem Ipsum dolar sit Home content"

        },

        {

            "id": 2,

            "name": "About",

            "url": "/about",

            "content": "About Lorem Ipsum dolar sit Avtar content"

        }

],

"aboutText" : [

    {

        "id":1,

        "text": "About text Lorem Ipsum dolar sit Avtar content 

Lorem Ipsum dolar sit Avtar content Lorem Ipsum dolar sit Avtar 

content Lorem Ipsum dolar sit Avtar content"

    }

]

}

 App.js

import React from 'react';

import './App.css';

import ReactJson from '../src/components/topnav'

function App() {

  return (

    <>

      <ReactJson />

    </>

  );

}

export default App;

aboutsec.js

import React from 'react';

export default (props) => {

    return(

        <div className="aboutSec">

        <h1>About Sec</h1>

        <div>{props.content}</div>

        </div>

    )

}

navlist.js

import React from 'react';

import {Link} from 'react-router-dom';

const NavmanLinks = (props) => {

    return(

        <>

        <li>

            <Link to={props.url}>

                {props.name}

            </Link>

        </li>

        <div>{props.content}</div>

        </>

    )

}

export default NavmanLinks;

topnav.js

import React, { Component } from 'react'

import NavList from '../components/navlist'

import AboutSec from '../components/aboutsec'

import TaxonomyNav from '../assets/topnavdbdata.json'

export default class ReactJson extends Component {

    renderadminMainNav = () => {

        return TaxonomyNav.taxonomy.map((menuItem, i) => 

 <NavList key={i} menu={menuItem.menu} name={menuItem.name} 

 url={menuItem.url} content={menuItem.content} />)

    }

    renderAboutText = () => {

        return TaxonomyNav.aboutText.map((menuItem, i) => 

 <AboutSec key={i} content={menuItem.text} />)

    }

    render() {

        return (

            <>

                <ul className="topNav">

                    {this.renderadminMainNav()}

                </ul>

                {/* For other content Area as variable */}

                {this.renderAboutText()}

            </>

        )

    }

}

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(

  <React.StrictMode>

   <BrowserRouter> <App /></BrowserRouter>

  </React.StrictMode>,

  document.getElementById('root')

);

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

And when you will use the above code then you will find a result like that: