textareaに入力された改行を反映してデータに保存したいです

Question

前提・実現したいこと

簡易な記事投稿サイトを作成しています。
投稿画面で本文改行したら、その改行を<br>や\nの形で状態を保存する方法を知りたいです。

発生している問題・エラーメッセージ

現在、本文の投稿の状態を保存することはできているのですが、
改行の状態を保存することができていません。
入力時には改行できていても、投稿した本文をみると改行されていないです。

投稿画面：

記事画面：

該当のソースコード

  constructor(props: {}) {
    super(props);
    this.state = {
      content: '',
    };
    this.handleChangeContent = this.handleChangeContent.bind(this);
  }

  handleChangeContent(e: React.FormEvent<HTMLInputElement>) {
    this.setState({content: e.currentTarget.value});
  }

  render() {
    return (
          <Form.Field
            label="Content"
            placeholder=""
            name="content"
            value={this.state.content}
            rows="20"
            control="textarea"
            onChange={this.handleChangeContent}
          />
          <Form.Button content="Submit" onClick={this.handleSubmit} />
        </Form>
      </Container>
    );
  }

完全なソースコードは以下になります：
https://github.com/jpskgc/article/blob/master/client/src/components/Post.tsx

補足情報（FW/ツールのバージョンなど）

・client: react/axios
・css frame-work: semantic-ui-react
・api: golang/gin
・web server: nginx
・db: mysql
・container: docker
・ci-tool: travis
・deploy: aws elastic beanstalk

以上、お手数ですがご教授いただけると幸いです。よろしくお願いいたします。

Answer 1

投稿した本文をみると改行されていないです。

それはtextareaの「改行」はあくまで「改行コード」だからです。

画面上に出す場合は表示時に「改行コード」→「<br />タグ」の変換が必要です。

※保存時に変換を行ってはいけません。あくまで表示時に変換を行ってください。