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 formFieldId: string = useMemo(() => `field-${uuidv4()}`, []);
const inputChildren = React.Children.toArray(children);
const hasError = errors?.length > 0;
let firstChild;
if (React.isValidElement(inputChildren[0])) {
firstChild = React.cloneElement(
inputChildren[0],
{ id: formFieldId },
{ id: formFieldId, hasError },
);
}
@ -40,7 +41,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{firstChild}
{inputChildren.filter((_, i) => i !== 0)}
{errors?.length > 0 && (
{hasError && (
<p
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'