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

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

どうも、イソップです。

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

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

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

[js]
return (

&nbsp;

);
[/js]

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

[js]
let items = [];

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

// 間に入れることが可能
//
[/js]

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

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

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

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.