JavaScript でボタンを作りオブジェクトをレンダリングしたいです

Question

前提・実現したいこと

JavaScriptでボタンを作りオブジェクトをレンダリングしたいです。
アドバイスいただければ嬉しいです。

発生している問題・エラーメッセージ

なぜかオブジェクトの要素の数より一つ多くボタンが生成されでしまいました。

### 該当のソースコード

const container = document.getElementById("container");

const friends = [
    {
    	name: "Hanako",
        age: 45,
        hobby: dance
    },
    {
    	name: "Goro",
        age: 33,
        hobby: tennis
    },
    {
    	name: "Ai",
        age: 29,
        hobby: piano
    }
];

const names = friends.map(friend=>friend.name);

names.forEach(renderB= (name) => {
      let btn = document.createElement("button");
      let text = document.createTextNode(name);
      btn.append(text);
      let buttonContainer = document.getElementById("buttons");
      buttonContainer.append(btn);
});  

renderB();

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
※質問はいつでも編集できます

Answer 1

names.forEach(renderB= (name) => {
...  

renderB();

renderB() を後から呼ぶ必要はありません。forEach()が指定された関数を呼ぶので充分です。

Comments

[退会済みユーザー]

ありがとうございます。
無事に解決致しました。