propsで渡される配列に改行を入れたい

Question

LaravelとReactでユーザ情報の登録機能を作っているのですが、
バリデーションで複数のエラーに引っかかった場合、
エラーメッセージを表示する際、複数の文章が改行されずに
1行にまとめられて表示されてしまいます。

エラーメッセージにスペースや改行コードを入れたり、
{}で渡されたpropsを囲んで、Object.keysに入れてmapやforeachを使ったり、
CSSでwhite-spaceをいじったりしてみたのですが全く効果がありません。

なんとか解決する方法を教えていただければ幸いです。

//このような形でエラーメッセージが渡されています
errorMessage:
["入力されたパスワードと確認パスワードが一致していません!", "パスワードは4文字以上で入力してく…]
0:"入力されたパスワードと確認パスワードが一致していません!"
1:"パスワードは4文字以上で入力してください"
new entry

↓エラーメッセージを表示するComponentです

import React from "react";

import "./form-input.styles.scss";

const FormInput = ({ handleChange, label, errorMessage, ...otherProps }) => (
    <div className="group">
        {label ? <label className="form-input-label">{label}</label> : null}
        <input className="form-input" onChange={handleChange} {...otherProps} />
        <p className="error-messages">{errorMessage}</p>
    </div>
);

export default FormInput;

↓FormInputのcssです

.group {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;

    .form-input {
        background: none;
        background-color: rgb(250, 245, 246);
        width: 50vw;
    }

    .form-input-label {
        font-weight: bold;
        color: rgb(7, 252, 109);
    }
    
    .error-messages{
        white-space: pre-line;
        color: rgb(248, 14, 14);
    }
}

使われているFormRequestです

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class UserStorePost extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        //有効化
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        //Validationのルールを設定
        return [
            'displayName' => ['required','min:3','max:10'],
            'email' => ['required','unique:users'],
            'password' => ['required','confirmed','min:4','max:8'],
            'password_confirmation' => ['required']
        ];
    }

    public function messages()
    {
        //Validationのエラーメッセージを設定
        return [
            'displayName.required' => 'ユーザー名を入力してください!',
            'displayName.min' => 'ユーザー名は最低3文字以上です!',
            'displayName.max' => 'ユーザー名は最高10文字までです!',

            'email.required' => 'メールアドレスを入力してください!',
            'email.unique' => 'そのメールアドレスは登録済みです!',
            
            'password.required' => 'パスワードを入力してください',
            'password.confirmed' => '入力されたパスワードと確認パスワードが一致していません!',
            'password.min' => 'パスワードは4文字以上で入力してください',
            'password.max' => 'パスワードは8文字以内で入力してください',

            'password_confirmation' => '確認パスワードを入力してください!',
        ];
    }
}

Answer 1

{errorMessage.map((m, idx) => {
  return(
    <div key={idx}>{m}</div>
  )}
)}

でどうでしょうか

Comments

[Shibou]

試してみたのですが、
下記のエラーログが出て、画面が真っ白になってしまいました。
-------------------------------------------------------------------------
react_devtools_backend.js:2430 The above error occurred in the <FormInput> component:
in FormInput (created by SignUp)
in form (created by SignUp)
in div (created by SignUp)
in SignUp (created by Context.Consumer)
in withRouter(SignUp) (created by Context.Consumer)
in Route (created by Home)
in Switch (created by Home)
in div (created by styled.div)
in styled.div (created by Home)
in div (created by Home)
in Home
in Router (created by BrowserRouter)
in BrowserRouter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
----------------------------------------------------------------------------

[Shibou]

先程Object.valuesで連想配列を配列に変え、
joinで,つなぎの一つの文字列を作成し、
splitで,分割してmapを使うという形でうまく改行することができました。
-----------------実際のコード-----------------------------------------
{Object.values({ errorMessage }).join().split(",").map((error, index) => (
<p key={index}>{error}</p>
))}
--------------------------------------------------------------------
3時間以上試行錯誤してましたが、ほかの方法だと
一つのタグ内に""で囲まれた文章が並んで表示されるという形か、上記のようなエラーが発生して画面が真っ白になってしまうと結果に終わりました。
コードが汚くてほかの方法を見つけたいので、
ほかの書き方に心当たりがございましたら教えていただきたいです。
ご回答いただき誠にありがとうございました!