Indentation problem inside brackets

[sheepwall]

Problem

The indentation for self-closing tags ("Airbnb" style I believe it is called) doesn't work when inside brackets ({condition && ( ... )}).

Both auto-indentation and gg=G creates this.

Examples

Here indentation is wrong

function test(props) {
    return (
        <div>
            {true && (
                <div
                    oneProp={testing}
                    twoProp={test}
                />
                    <div>
                        One indent too much
                    </div>
            )}
        </div>
    );
}

It works when a jsx component is direct parent (e.g. Fragment)

function test(props) {
    return (
        <div>
            {true && (
                <Fragment>
                    <div
                        oneProp={testing}
                        twoProp={test}
                    />
                    <div>
                        Works with direct parent Fragment!
                    </div>
                </Fragment>
            )}
        </div>
    );
}

[yuezk]

I see, but it’s an invalid usage in React. Multiple elements must be wrapped in another element or the fragment, right?

[sheepwall]

The div elements surrounding the {true && (...)} makes it valid.

(In my simplified example it seems dumb to not just move them inside, but it is justified if the div would be a more complex element, for example.)

[yuezk]

@sheepwall According to the React compiler, Adjacent JSX elements must be wrapped in an enclosing tag., and your simplified snippet could fail to compile, that's why I said it was an invalid React usage.

So, the simplified example might not be suitable. What does the real use case look like?

[sheepwall]

Yes I think you are right! The compiler doesn't like it. I was mistaken, have a good day :^)