登録したユーザーの名前が配列で取得されてしまう解決方法について

はじめに

登録しているユーザーの名前を取得しようとしましたが、名前が配列で取得されてしまうため、そちらの解消方法について共有させていただきます。

下記のように記述していました。

const matchedName = users.
      filter((user) => user.user_id === searchUserId) // idが一致したﾕｰｻﾞｰを取得
      .map((user) => user.name); // その中の名前を取得

      setUserName(matchedName); // 取得した名前をセット

解決方法

こちらの記述で解決することができました。

.tsx

const matchedUser = users.find((user) => user.user_id === searchUserId); 
// ユーザーを１つずつ取り出し、idが一致した最初のユーザーを取得

const matchedName = matchedUser ? matchedUser.name : ""
// 取得したユーザーがあれば、その名前を取得

      setUserName(matchedName); // 取得した名前をセット

終わりに

map()を使っているため、配列string[]で取得されてしまっていました。