Ads Top

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:

 

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.