React: map関数で配列要素を縦に表示したい

Question

Reactにおいて，配列の要素を縦に表示したいと考えておりますが，どうしても要素が横に結合されて表示されてしまいます。

まず，受け取る側のデータは以下の様な配列です。

次に，表示するためのmap関数部分が以下のコードです。
親コンポーネント：Dfprocessに図の様な配列が格納されています。

<Child nameList={Dfprocess} clickButton={(item) => handleClick(item)} />

子コンポーネント：

  const buttonItems = nameList.map((namelist, idx) => {
    return (
      <div key={idx} style={{margin: 20}}>
        <button onClick={() => clickButton(namelist.Role)}>
          <li key={idx}>{namelist.name}</li>
        </button>
      </div>
    );
  });
  

上記のコードを実行すると，表示されるのが以下の様に結合されて表示されております。

理想としては，

• Tanaka
• Yamada
• Takahashi

と表示したいのですが，うまく行きません。。どうか，解決方法をご教示頂けないでしょうか。

Answer 1

次のようにしてみてはどうでしょうか？

const buttonItems = nameList.map((nameList) => {
  return nameList.name.map((name, index) => {
    return (
      <div key={index} style={{ margin: 20 }}>
        <button onClick={() => clickButton(namelist.Role[index])}>
          <li>{name}</li>
        </button>
      </div>
    );
  });
});

Comments

[caveatld]

早速のご回答誠にありがとうございました！！意図した通りの結果が得られました！