Reactでの文字列改行が面倒やった。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/865489/7ad979a3-9e66-455c-a366-fcbc6edf71fc.png)

以下のように、エラーメッセージをただ改行したかったのです。
```改行前.
ログインに失敗しました。ユーザー名またはパスワードが間違っています。
```
```改行後.
ログインに失敗しました。
ユーザー名またはパスワードが間違っています。
```


単純に"\n"を入れてもまったく変わらず。。。

```(修正前)LoginPage.js
    ...
    
    setErrorMsg('ログインに失敗しました。\nユーザー名またはパスワードが間違っています。'); // ←ここ
    
    ...
    
  return (
    <div className="login-container">
      <h2>ログインページ</h2>
      {errorMsg && <p className="error-msg">{errorMsg}</p>} //* errorMsgが存在する場合のみ、ここに表示 *//
    <div className="form-group">
        <input
          type="text"
          placeholder="ユーザーID"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div className="form-group">
        <input
          type="password"
          placeholder="パスワード"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button onClick={login}>ログイン</button>
    </div>
  );
```
### 結果（変化なし）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/865489/7ad979a3-9e66-455c-a366-fcbc6edf71fc.png)


改行を実現するには、split()メソッド等を使ってやらなきゃダメなようです。

```(修正後)LoginPage.js
    ...
    
    setErrorMsg('ログインに失敗しました。\nユーザー名またはパスワードが間違っています。');
    
    ...
    
  return (
    <div className="login-container">
      <h2>ログインページ</h2>
      // 以下、修正内容 //
      {errorMsg &&
        errorMsg.split('\n').map((line, index) => (
          <p key={index} className="error-msg">
            {line}
          </p>
        ))}
      // 以上、修正内容 //
      <div className="form-group">
        <input
          type="text"
          placeholder="ユーザーID"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div className="form-group">
        <input
          type="password"
          placeholder="パスワード"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button onClick={login}>ログイン</button>
    </div>
  );
```
## 結果（改行されたけど幅開きすぎ。。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/865489/1d5a6fe7-f08b-4511-a938-9ef577c42778.png)


# 2025/06/11追記
CSS指定にて"white-space: pre-line"を指定することで、簡単に文字列の折り返しを実現できました！
ご指摘いただいた@YuneKichi さん、ありがとうございます！

（split()関数などの対応は不要！）

```LoginPage.css
    ...
.error-msg {
  color: red;
  margin-bottom: 1rem;
  text-align: left;
  white-space: pre-line; /* ←これを追加 */
}

```
```LoginPage.js
    /* 略 */
  const login = async () => {
    try {
      const response = await axios.post('http://localhost:8080/auth/login', {
        username,
        password,
      });
    } catch (error) {
      setErrorMsg('ログインに失敗しました。\nユーザー名またはパスワードが間違っています。');
    }
  };

  return (
    <div className="login-container">
      <h2>ログインページ</h2>
      {errorMsg && <p className="error-msg">{errorMsg}</p>}
      <div className="form-group">
        <input
          type="text"
          placeholder="ユーザーID"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div className="form-group">
        <input
          type="password"
          placeholder="パスワード"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button onClick={handleSubmit}>ログイン</button>
    </div>
  );
    /* 略 */
```

## 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/865489/9b1f6571-d842-4495-b1aa-ceeb13ac8f22.png)