CODEWITHSUNDEEP
reactjs
nanquim
nanquim

Reputation: 1924

React - Use JSON to store data

Is it a bad idea to use JSON to store data for components? Like this navbar? Is this a bad practice and why? 

import json from '../../../dados/links.json';

const NavBar = () => {
  return (
    <div
      className="collapse navbar-collapse justify-content-around"
      id="collapsibleNavbar">
      <ul className="navbar-nav">
        {/* TODO key nao deveria ser index  */}
        {json.links.map((item, index) => {
          return <Link key={index} item={item} />;
        })}
      </ul>
    </div>
  );
};

json: 

{
  "links": [
    {
      "titulo": "A Associação",
      "href": "/sobre"
    }
  ]
};

Upvotes: 0

Views: 80

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53874

It's a good idea and commonly used for configs:

src |
    config |
        config1.js
        config2.js
        index.js

You define a config file as .json or equivialent javascript Object:

const config = {
  siteTitle: '...',
  siteDescription: '...',
  siteKeywords: '...',
  siteUrl: '...',
  siteLanguage: '...',
  googleAnalyticsID: '...',
  googleVerification: '...',
  name: '...',
  location: '...',
  githubLink: '...'
  navLinks: [
    {
      name: 'About',
      url: '#about',
    },
    {
      name: 'Timeline',
      url: '#jobs',
    },
    {
      name: 'Projects',
      url: '#projects',
    },
    {
      name: 'Contact',
      url: '#contact',
    },
  ]
};
export default config;

And use it across components:

import { githubLink, navLinks } from '@config';

Upvotes: 1

Related Questions