Created: 8/1/2025 17:11
Updated: 8/1/2025 17:16
Exported: 8/14/2025 11:30
Link: https://chatgpt.com/c/688ce725-755c-8001-b1bb-48a5d553b8f6

I am consuming an array of objects in my react app. The array is hard coded into the page. How can I abstract it to a separate file This is the json: const cardData = [ { img: 'https://picsum.photos/800/450?random=1', tag: 'Engineering', title: 'Revolutionizing software development with cutting-edge tools', description: '{"This is italic and bold text."}', authors: [ { name: 'Remy Sharp', avatar: '/static/images/avatar/1.jpg' }, { name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }, ], },]

To abstract your hardcoded cardData array into a separate file in your React app, follow these steps:

Create a new file (e.g. cardData.js) in your project structure, preferably in a data or assets folder.

src/data/cardData.js:

const cardData = [
  {
    img: 'https://picsum.photos/800/450?random=1',
    tag: 'Engineering',
    title: 'Revolutionizing software development with cutting-edge tools',
    description: '{"This is *italic* and **bold** text."}',
    authors: [
      { name: 'Remy Sharp', avatar: '/static/images/avatar/1.jpg' },
      { name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' },
    ],
  },
];

export default cardData;

In the file where you were previously hardcoding cardData, remove the array and import it instead:

Example usage in your component:

import React from 'react';
import cardData from './data/cardData'; // adjust path as needed

const CardList = () => {
  return (
    <div>
      {cardData.map((card, index) => (
        <div key={index}>
          <img src={card.img} alt={card.title} />
          <h2>{card.tag}</h2>
          <h3>{card.title}</h3>
          <p>{card.description}</p>
          <div>
            {card.authors.map((author, i) => (
              <div key={i}>
                <img src={author.avatar} alt={author.name} />
                <span>{author.name}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default CardList;

• If you plan to reuse cardData in multiple components, this approach makes it easier to maintain and scale.
• Make sure image paths like /static/images/avatar/1.jpg resolve correctly in your project structure.

Let me know if you want to convert the description string (currently JSON-style) into parsed markdown or actual JSX!

can I not store and import the data as json rather than js? I might want to retrieve it from a remote url in future

Yes, absolutely — you can and should use a .json file if you're treating the data as static content and plan to possibly fetch it remotely later. That keeps things clean and makes the transition smoother.

Create a file like cardData.json in a data/ folder:

src/data/cardData.json:

[
  {
    "img": "https://picsum.photos/800/450?random=1",
    "tag": "Engineering",
    "title": "Revolutionizing software development with cutting-edge tools",
    "description": "This is *italic* and **bold** text.",
    "authors": [
      { "name": "Remy Sharp", "avatar": "/static/images/avatar/1.jpg" },
      { "name": "Travis Howard", "avatar": "/static/images/avatar/2.jpg" }
    ]
  }
]

Note: I removed the "{...}" wrapping from description because it was a string inside a string, which doesn't make sense in JSON. If you're planning to parse markdown, keep it a normal string.

React supports importing JSON out-of-the-box with Webpack/Vite.

In your component:

import cardData from './data/cardData.json'; // adjust the path as needed

Then use it as you would an array:

{cardData.map((card, index) => (
  <div key={index}>
    <img src={card.img} alt={card.title} />
    <h2>{card.tag}</h2>
    <h3>{card.title}</h3>
    <p>{card.description}</p>
    <div>
      {card.authors.map((author, i) => (
        <div key={i}>
          <img src={author.avatar} alt={author.name} />
          <span>{author.name}</span>
        </div>
      ))}
    </div>
  </div>
))}

If you later want to fetch from a remote URL (e.g., /api/cardData.json), you can simply replace the import with a fetch call:

const [cardData, setCardData] = useState([]);

useEffect(() => {
  fetch('/data/cardData.json')
    .then(res => res.json())
    .then(data => setCardData(data));
}, []);

So yes — go with .json now, and you’ll be set up nicely for remote data later. Let me know if you want help switching to a fetch-based approach or using markdown parsing for the description.

Powered by ChatGPT Exporter