typescriptのreturnでbrタグを返す。

Question

該当コード

<div>{hoge(fuga)}</div>

export const hoge = (fuga: string) => {
  fuga
  .replace(/\n/g, "\n<br/>\n")
  .split("\n")
  .map((aaa: string, bbb: number) => {
    if (aaa === "<br/>") {
      return <br key={bbb} />;
    } else {
      return `${aaa}`;
    }
  });
  return fuga
};

return <br key={bbb} />;の箇所で、書き方が誤ってると思いますが以下のようなエラーがでてて、内容が分からなくてなぜなのか知りたいです。

Comments

[miyabi_pudding]

> <div>{hoge(fuga}</div>

の、fugaの後に")"をつけ忘れているから、とかではないでしょうか？
Reactの文法的に合っているならすみません。

[kaoru_tujimiya]

すいません、こちら単純にteratailに書くときのミスでした????‍♂️

Answer 1

export const hoge = (fuga: string) => {
    fuga
    .replace(/\n/g, "\n<br/>\n")
    .split("\n")
    .map((aaa: string, bbb: number) => {
      if (aaa === "<br/>") {
        return "<br  key={bbb}/>";
      } else {
        return `${aaa}`;
      }
    });
    return fuga
  };

これでどう？　期待した動作になってますか？

Comments

[kaoru_tujimiya]

ありがとうございます。
そうですね、こちらも期待した動作とはいきませんでした????‍♂️

[mike2mike4]

keyは宣言してないですし、何を意図して改行タグの中に入れているのですか？

[mike2mike4]

というか、<br>に属性値入れてるコード初めて見ました

[maisumakun]

> というか、<br>に属性値入れてるコード初めて見ました

classやstyleは通常のHTMLとしても指定できますし、keyはReactで使う属性です。

Answer 2

単純に、拡張子をJSXにし忘れたとか、そういうことはありませんか？

Comments

[kaoru_tujimiya]

回答いただきありがとうございます。
tsxで書いてたんですが、諸事情でtxで書きたくて書いてたらこのエラーに達しました。
コードの書き方が違うんだろうとは自負してますがどうも分からなくてですね、、

[maisumakun]

> コードの書き方が違うんだろうとは自負してますが

自力でReact.createElementを呼べば書けなくはないですが、あまりおすすめはしません。

[kaoru_tujimiya]

なるほどですね、それも考えてました。
色々サポートして頂きありがとうございます！
tsで書くの辞める方向で進めていこうと思います。