使用 tsx 组件名称循环对象列表（JSON 文件）并在 React tsx（TypeScript）中渲染它 渲染 JSON 中引用的 react-icons，如何？

Question

I have a JSON file with a list of iconCards where each iconCard has a property icon . This property contains the name of a react-icons Component I want to display.

My JSON file:

{
    "input": {
        "placeholder": "Paste in your individual video url here..."
    },
    "button": {
        "text": "Download video"
    },
    "iconCards": [
        {
            "icon": "BsEmojiHeartEyes",
            "title": "Free to use",
            "description": "Our website offers a free way to download Instagram videos. No registration or sign-up is required. Enter the URL of the video you wish to download and click the 'Download' button."
        },
        {
            "icon": "BsStopwatch",
            "title": "Fast download speeds",
            "description": "Our Instagram video downloader website offers fast download speeds so you can quickly and easily download your favourite videos."
        },
        {
            "icon": "GrUserExpert",
            "title": "Download in HD",
            "description": "Our Instagram video downloader allows you to download videos in high definition, so you can enjoy your favourite videos in the best quality possible."
        },
        {
            "icon": "AiOutlineVideoCamera",
            "title": "No Download Limits",
            "description": "Our Instagram video downloader has no download limits, so you can download as many videos as you want!"
        },
        {
            "icon": "GrUserExpert",
            "title": "Fully Secured",
            "description": "Our website is fully secured with the latest security features. Your data is safe with us. We use the latest encryption technology to protect your data."
        },
        {
            "icon": "GrUserExpert",
            "title": "Mp4 format",
            "description": "Our website offers the ability to download Instagram videos in MP4 format. This popular video format is widely compatible with many devices and media players."
        }
    ],
    "sections": [
        {
            "title": "Instagram Video-Download",
            "description": {
                "paragraphs": [
                    "Our website is the best place to download Instagram videos. With our simple and easy-to-use interface, you can download videos from Instagram in just a few clicks. We offer high-quality videos optimized for all devices so that you can enjoy your videos on any device."
                ]
            }
        },
        {
            "title": "About Instagram Video Downloader?",
            "description": {
                "paragraphs": [
                    "If you are looking for a website that will allow you to download videos from Instagram, then you are in the right place. This website is straightforward to use, and it is entirely free. Enter the URL of the Instagram video you want to download and click on the download button. You can save the video to your device within seconds."
                ]
            }
        },
        {
            "title": "How to Download Instagram Videos?",
            "description": {
                "paragraphs": [
                    "By visiting this page, your purpose is to download an Instagram video and save it to your device. Since Instagram doesn't offer a download option, we're here to help you.",
                    "1) Simply enter the Instagram video URL of your choice, and click on the Download button.",
                    "2) Our servers will start fetching the video and provide you with a preview option and a download button to start downloading the video.",
                    "By hitting the download button, you can save it to your device in MP4 format."
                ]
            }
        }
    ],
    "faqs": {
        "heading": "FAQs for Instagram Video Downloader",
        "items": [
            {
                "question": "Can we download reels or IGTV videos from this tool?",
                "answer": "This website supports all kinds of Instagram video downloading, whether it be Instagram video, Instagram reels or IGTV video. "
            },
            {
                "question": "Is it legal to download videos from Instagram?",
                "answer": "Yes, it is legal to download videos from Instagram. However, you should only download videos that you have the rights to. If you download a video you do not have the right to, you could infringe on copyright laws."
            },
            {
                "question": "How to download video from Instagram?",
                "answer": "Our website solves the same purpose. All you need is Instagram video URL to download it."
            },
            {
                "question": "How to download a video from Instagram with audio?",
                "answer": "Our website downloads the video with audio only. If you wish to download only audio from Instagram videos, you can check out Instagram audio downloader page."
            }
        ]
    },
    "headings": {
        "h1": "Instagram Video Downloader",
        "h1Paragraph": "Download Instagram videos and save them to your device.",
        "h2": "Instagram Video Downloader Features",
        "h2Paragraph": "List of top features"
    }
}

In my Tsx I Failed hard tho, I tried everything I can think of:

      <UL>
    {content.iconCards.map((Item, index) => (
      <LI key={index}>
        <>
         <Item.icon/> <-- How to render it?
          <h3 className="font-bold">{Item.title}</h3>
          <p>{Item.description}</p>
        </>
      </LI>
    ))}
  </UL>

My interface:

    interface PageProps {
  input: {
    placeholder: string
  }
  button: {
    text: string
  }
  iconCards: {
    icon: React.ReactNode
    title: string
    description: string
  }[]
  sections: {
    title: string
    description: { paragraphs: string[] }
  }[]
  faqs: {
    heading: string
    items: {
      question: string
      answer: string
    }[]
  }
  headings: {
    h1: string
    h1Paragraph: string
    h2: string
    h2Paragraph: string
  }
}

I made this working in a TypeScript file, where I can type the Icon as ReactIcon. However, I want to build a multilingual Page and for that, JSON files are better, I guess. Thanks!

Answer 1

You can import separte React icons folder in a Single Component & map it accordingly.

import * as ReactIconAI from "react-icons/ai";
import * as ReactIconGR from "react-icons/gr";
import * as ReactIconBS from "react-icons/bs";

const ReactIcon = ({ icons }) => {
    const iconFolder = icons.slice(0, 2).toLowerCase();
    // Map Icon to Respective Folder by comparing the First two Character of the 
    //Icons
    let icon =
      iconFolder === "ai"
        ? ReactIconAI[icons]
        : iconFolder === "bs"
        ? ReactIconBS[icons]
        : iconFolder === "gr"
        ? ReactIconGR[icons]
        : "";
    // return only if the icon Exist
    return icon && React.createElement(icon);
  };

By using the above component, You can map through your json.

return (
    <>
      {content.iconCards.map((Item, index) => (
        <>
          <h3 className="font-bold">{Item.title}</h3>
          <p>{Item.description}</p>
          <ReactIcon icons={Item.icon} />
        </>
      ))}
    </>
  );