【React】三項演算子による表示の切り替え

【前提】
Firestoreに画像のURLを保存しています。
アップロードするたびにURLも更新されます。
thumgnailMediumImageUrlはUseStateで管理

【やりたいこと】
URLが無効、またはNullの場合、特定のアイコンを表示（images/default/user.svg）
有効なURLの場合、FirestoreのURLを使用。

【現状の問題】
FirestoreのURLが有効な場合もimages/default/user.svgが表示されてしまう。

Javascript
1    <div className={s.upload__icon}>
2      <input
3        ref={inputRef}
4        onChange={onChangeImage}
5        accept={acceptImageFileType}
6        style={{ display: "none" }}
7        type="file"
8      />
9      <>
10      {thumgnailMediumImageUrl ? (
11        !thumgnailMediumImageUrl ? (
12        <div class={s.upload__icon__inner} onClick={onClick}>
13          <img className={s.upload__img} src={props.src} alt="profile icon" />
14          {props.icon}
15        </div>
16        ) : (
17        <div class={s.upload__icon__inner} onClick={onClick}>
18          <img className={s.upload__img} src={thumgnailMediumImageUrl} alt="profile icon" />
19          {props.setProfileImageUrl}
20        </div>
21      ) ) : (
22        <div class={s.upload__icon__inner} onClick={onClick}>
23          <img className={s.upload__img} src="images/default/user.svg" alt="profile icon" />
24          {props.icon}
25        </div>
26        )
27      }
28      </>
29                <p className={s.upload__helper__text} onClick={onClick}>
30                  アイコンを変更する
31                </p>
32          </div>

そもそも三項演算子で実現しようとする内容ではないでしょうか？
何かアドバイスいただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

三項演算子のネストは可読性を著しく損ないますのでやめましょう。また今回の場合

JavaScript
1        <div class={s.upload__icon__inner} onClick={onClick}>
2          <img className={s.upload__img} src={props.src} alt="profile icon" />
3          {props.icon}
4        </div>

の部分を新しいコンポーネントに切り出し、その中で if を用いた条件付きレンダリングさせるようにすればスッキリした形に収まるかと思います。

ちなみに三項演算子の

JavaScript
1      {thumgnailMediumImageUrl ? (
2        !thumgnailMediumImageUrl ? (

というのは P ? (!P ? A : B) : C という形であり、A には絶対たどり着けない謎の条件式です。

追記：
というかよく見たら src しか変わってないので条件付きレンダリングまでやる意味ないですね。src 書き換えるだけで十分です。もちろん新コンポーネントには書き出したほうがよいです。コンポーネントは適度に細かく分けていきましょう。

追記 2：
以下のように URL を事前に用意してしまえば条件付きレンダリングを書かなくてもよいです。

JavaScript
1let imgUrl = 'default_url'
2if (condition){
3  imgUrl = 'some_url'
4else if (another_condition){
5  imgUrl = 'other_url'
6} 
7...
8return (
9        <div class={s.upload__icon__inner} onClick={onClick}>
10          <img className={s.upload__img} src={imgUrl} alt="profile icon" />
11          {props.icon}
12        </div>
13       )