TextField error in console in FluentUI React

Question

I am using TextField component provided by Fluent UI in React wherein I am rendering a custom validation error message (JSX.Element).

 <TextField
    value={"ABC"}
    onChange={(_, newValue: string | undefined) =>                   
             onValueChange(newValue)}
    errorMessage={item.validationError|| undefined}
 />;

The validation error (referred to as item.validationError in above code) is a JSX element which makes use of the Stack component provided by Fluent UI. Pseudo code -

<Stack horizontal horizontalAlign="start">
   <Stack.Item> {} </Stack.Item>
   <Stack.Item> {} </Stack.Item>
</Stack>

For some reason, whenever validation error comes up, this error comes up in console -

It's not impacting the functionality in any way, but how can this error be removed and why is it coming ? I am suspecting this is because Stack is being used inside the TextField component and Stack internally uses div whereas TextField uses p tag.

Answer 1

The warning is printed by your browser that checks for certain kind of HTML nesting rules. E.g. block elements should not appear as children of inline elements.

p should only contain inline elements. But a div is a block element.

Your Stack component uses a div element. That is why you see the warning.

Inline and block elements have different attributes. One of the most significant is that block elements take always 100% width.

I don't know the UI library you are using but maybe you can use a different tag for the Stack.

See also: https://stackoverflow.com/a/41928635