Creating a React Component to Display Cards from JSON

Creating a React Component to Display Cards from JSON

This tutorial will guide you through creating a React component that takes a JSON file, converts it into multiple cards with an image, title, and renders Markdown content.

Step 1: Install necessary packages

First, make sure you have create-react-app installed, and create a new project:

npx create-react-app my-app
cd my-app

Install the axios package to fetch data from the JSON file and the react-markdown package to render the Markdown content:

npm install axios react-markdown

Step 2: Create the JSON file

Create a JSON file named data.json with the following structure:

[
  {
    "id": 1,
    "title": "Card Title 1",
    "image": "image-url-1",
    "markdown": "markdown-file-1.md"
  },
  {
    "id": 2,
    "title": "Card Title 2",
    "image": "image-url-2",
    "markdown": "markdown-file-2.md"
  }
]

Step 3: Create the Card component

Create a new file called Card.js:

import React from 'react';
import ReactMarkdown from 'react-markdown';

const Card = ({ title, image, markdownContent }) => {
  return (
    <div className="card">
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <ReactMarkdown>{markdownContent}</ReactMarkdown>
    </div>
  );
};

export default Card;

Step 4: Create the CardsList component

Create a new file called CardsList.js:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Card from './Card';

const CardsList = ({ jsonFile }) => {
  const [cardsData, setCardsData] = useState([]);

  const fetchCardsData = async () => {
    try {
      const response = await axios.get(jsonFile);
      setCardsData(response.data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  const fetchMarkdown = async (markdownFile) => {
    try {
      const response = await axios.get(markdownFile);
      return response.data;
    } catch (error) {
      console.error('Error fetching markdown:', error);
    }
  };

  useEffect(() => {
    fetchCardsData();
  }, []);

  return (
    <div className="cards-list">
      {cardsData.map(async (card) => {
        const markdownContent = await fetchMarkdown(card.markdown);
        return (
          <Card
            key={card.id}
            title={card.title}
            image={card.image}
            markdownContent={markdownContent}
          />
        );
      })}
    </div>
  );
};

export default CardsList;

Step 5: Update App.js to use the CardsList component

import React from 'react';
import './App.css';
import CardsList from './CardsList';

function App() {
  return (
    <div className="App">
      <h1>React Cards from JSON</h1>
      <CardsList jsonFile="/data.json" />
    </div>
  );
}

export default App;

Now, when you run your React app with npm start, the CardsList component will fetch the data from the JSON file and display the cards with images, titles, and rendered Markdown content. Make sure you also serve your data.json and Markdown files through your development server.

Now, when you run your React app with npm start, the CardsList component will fetch the data from the JSON file and display the cards with images, titles, and rendered Markdown content. Make sure you also serve your data.json and Markdown files through your development server.