ChatGPTを使用したアプリ開発記【プロフィール画面と投稿詳細画面でアイコンの切替え】

画面コード

Home.js

userPosts.map((post, index) => (
  <PostCard         
       post={post}  from="home" 
    />
))

Profile.js

userPosts.map((post, index) => (
  <PostCard         
       post={post}  from="profile" 
    />
))

各画面でfromのプロップスを設定し、PostCard.jsに渡している。

プロップス（props）とは？

• Reactコンポーネントに外部から渡すデータや関数のことです。
• 親コンポーネントが子コンポーネントに値を渡すための仕組み。
• コンポーネント内で props.post や props.from のように参照できます。

投稿カードのコード

PostCard.js

// home画面では投稿者のアイコン、それ以外の画面はユーザーのアイコン
const userImageUrl = from === "home" ? (post.photoURL || "/default-icon.png") : (post.user?.icon || "/default-icon.png");

        <div className="w-12 h-12 rounded-full overflow-hidden border mr-2">
          <img
          　// 上記で定義したuserImageUrlを記述
            src={userImageUrl || "/default-icon.png"}
            alt="ユーザーアイコン"
            className="w-full h-full object-cover"
          />
        </div>

各画面で設定したプロップスのfromを受取っている。

UI

投稿一覧画面では投稿者のアイコン、プロフィール画面ではカレントユーザーのアイコン