オプショナルチェイニング

[cossack910]

公式 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining

<dd>{user.hobbies?.join("/")}</dd> ←hobbies配列がからの時もjoinメッソドのエラーで落ちない

[cossack910]

全体

import React from "react";
import User from "./interface/user";

type Props = {
  user: User;
};

export const UserProfile: React.FC<Props> = (props) => {
  const { user } = props;
  return (
    <dl>
      <dt>名前</dt>
      <dd>{user.name}</dd>
      <dt>趣味</dt>
      <dd>{user.hobbies?.join("/")}</dd>
    </dl>
  );
};