スプレッド構文を利用してUI表示をうまく切り替える

React・VueのUI表示切り替えで使える

フラグで表示の切り替えを行うことって多いかと思います。
その時に使えそうなものがあったので今回紹介します。
大したものではないので、また普段使っている方も多いと思います。
ぜひ、使っていいい感じに切り替えできるといいなと思います。

スプレッド構文を使う

const list1 = [1, 2];
const list2 = [10, 20];
const result = [...list1, ...list2];

これですね。

const list1 = [[], 2];
const list2 = [10, 20];
const result = [...list1, ...list2];
=> [2, 10, 20]

空の配列はマージすると消えることを利用したUIの切り替えが使えます。

例えば

const list1 = [
   flag ?
   [
      { title: 'AAA' }
   ]
   :
   [], 
   [{title: 'BBB'}]
];
const list2 = [[{title: 'ZZZ'}], [{title: 'XXX'}]];
const result = [...list1, ...list2];
// 　flag = falseの時
=> [
   [{title: 'BBB'}],
   [{title: 'ZZZ'}], 
   [{title: 'XXX'}],
]

になります。

これを利用すれば、UIでリスト表示を条件で切り替えてかつ、余分な空配列は消えるので綺麗に表示できます。
filterなどで処理することもなくなるのでコードも見やすくなるのではないかと思います。

ぜひこちら利用して、いい感じでUI切り替えできるといいなと思います。

閲覧ありがとうございました。