【React】JSXでタグとタグの間に半角スペースを挿入する

【React】JSXでタグとタグの間に半角スペースを挿入する

どうも、イソップです。

JSX内での半角スペースは で挿入できますが、
<span>...</span> <span>...</span>という感じのタグ同士の間に半角スペースを挿入したいときにかなり手間取ったので、備忘録に残しておきます。

タグの間に半角スペースを挿入する

べた書きな感じの場合は、次のように書きます。

return (
<div><span>...</span>&nbsp;<span>...</span></div>
);

配列をループして新しい配列にする場合は、間に半角スペースをpushしてあげます。

let items = [];

lists.forEach((list, i) => {
items.push(
<span key="{i}">{list}</span>
);
items.push(' '); // 半角スペースを挿入
});

// 間に入れることが可能
// <span>...</span> <span>...</span> <span>...</span>

何かしらのデータに対して処理するケースがほとんどだと思うので、ループ処理での利用機会が多いと思います。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。Udemyでプログラミング解説の講師や、ドローンを使った映像制作も行っています。

プロフィール