moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

FormGroup: pass hasError to child component

This commit is contained in:
Alex Gleason 2022-05-09 11:53:16 -05:00
parent 5e531eda30
commit d4ebfe474f
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/soapbox/components/ui/form-group/form-group.tsx
View File

@ -15,12 +15,13 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
const { children, errors = [], labelText, hintText } = props; const { children, errors = [], labelText, hintText } = props;
const formFieldId: string = useMemo(() => `field-${uuidv4()}`, []); const formFieldId: string = useMemo(() => `field-${uuidv4()}`, []);
const inputChildren = React.Children.toArray(children); const inputChildren = React.Children.toArray(children);
const hasError = errors?.length > 0;
let firstChild; let firstChild;
if (React.isValidElement(inputChildren[0])) { if (React.isValidElement(inputChildren[0])) {
firstChild = React.cloneElement( firstChild = React.cloneElement(
inputChildren[0], inputChildren[0],
{ id: formFieldId }, { id: formFieldId, hasError },
); );
} }
@ -40,7 +41,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{firstChild} {firstChild}
{inputChildren.filter((_, i) => i !== 0)} {inputChildren.filter((_, i) => i !== 0)}
{errors?.length > 0 && ( {hasError && (
<p <p
data-testid='form-group-error' data-testid='form-group-error'
className='mt-0.5 text-xs text-danger-900 bg-danger-200 rounded-md inline-block px-2 py-1 relative form-error' className='mt-0.5 text-xs text-danger-900 bg-danger-200 rounded-md inline-block px-2 py-1 relative form-error'