javascript - さまざまなサイズの配列に基づいて、react コンポーネントのコンテンツを動的に作成する方法

私は現在、友人の 1 人がビデオ ゲームの値を計算するための Web サイトを作成しています。データベースから取得した各国の修飾子をいくつか表示する表示を作成しようとしています。すべてのモディファイアはデータベース内の 2D 配列から順番に保存され、モディファイアの各セットはその 2D 配列内の独自の配列に分離されます。 Ant Design の Popover コンポーネントを使用して表示しようとしています。<div> 内に情報を配置する必要があります。または他の React コンポーネントを使用する場合、各セクションを <p> で区切ろうとします。または <段落>書式設定用のタグ。私が抱えている問題は、プルする修飾子の配列の長さが異なるため、HTML または React コードで書式設定を動的に生成する必要があることです。が必要なのですが、その方法がわかりません。配列は修飾子 [文字列] の名前で編成され、次のインデックスには修飾子 [数値] の値が含まれます。以下に、コンポーネントのコード、修飾子用に配列をフォーマットする方法、およびそれを表示する推奨方法をリストします。助けていただければ幸いです!

コンポーネント コード:

<Popover placement="right" title={"First Idea"} content={[THIS IS WHERE THE HTML/REACT GOES]}>
     <Button> First Idea </Button>
</Popover>

配列の例:

ideaSet = ["legitimacy", 1, "possible_policy", 1]

優先組織:

<div style={{...}}>
<p>
{[Name of Modifier] + ": " + [Modifier Value]}
</p>
...Do the above for however many modifiers there are (not sure how with ReactJS).
</div>

配列で .map を使用し、<p> を返します。

return this.props.ideaSet.map((idea) => <p>{your implementation}</p>)