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

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>

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

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