vasya
31 lines
907 B
TypeScript
31 lines
907 B
TypeScript
import React, { useEffect, useState } from "react";
|
|
|
|
/**
|
|
* Объект с данными для отображения в блоке с ошибками
|
|
*/
|
|
export interface FormValidErrObject
|
|
{
|
|
fieldName: string | null,
|
|
fieldErrors: string[] | []
|
|
}
|
|
|
|
export default function FormValidErr ( {visible, validErrorsObj}: {visible: boolean, validErrorsObj: FormValidErrObject[]} )
|
|
{
|
|
const [blockVisible, setBlockVisible] = useState<boolean>(false);
|
|
useEffect ( () => {
|
|
setBlockVisible(visible)
|
|
}, [visible]);
|
|
return (
|
|
<div id="form-valid-err-container" className={`form-valid-err--${blockVisible ? "visible" : 'hide'}`}>
|
|
<ul>
|
|
{ validErrorsObj.map( (validErrObj: FormValidErrObject, index: number) => (
|
|
<li key={index}>
|
|
<b>{ validErrObj.fieldName }</b>:
|
|
<span>{ validErrObj.fieldErrors }</span>
|
|
</li>
|
|
)) }
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|