从功能组件渲染组件？

Question

我正在尝试重新创建此课程目录：

因此，我有一个课程对象列表，如下所示：

  {
    id: 1,
    title: "Learn Javascript",
    image:
      "https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg",
    description:"...",
    author_id: "123",
    tags: ["programming", "javascript", "intro", "web"],
    pro: false
  },

每个都有一个密钥tags，其中包含一组标签。我有一个CardList，Card，TagList和Tag组件。最后，当您单击标签时，包含该标签的所有课程都应呈现。

目前，我正在尝试找出在TagList组件上布置所有标签的最佳方法。

我在这里有骨架

const TagList = () =>{

    return (
        <div className="taglist-container">
            {courses.map(({tags}) => (
                console.log(tags)
            ))}
        </div>
    );
} 

我在想什么：创建一个函数，将每个过程中的所有标签展平到一个对象中并存储其计数：{'javascript': 5, 'web': 5, ...}，然后将每个键/值作为道具传递给Tag以显示它。然后在onClick上创建一个Tag函数，该函数将根据所单击的内容呈现特定的卡片。

有想法吗？