I experience some odd behavior of jsx-indent-props depending on a ternary before the actual component.
When having a component with props within the ternary and not having the whole ternary in one line, the rule enforces more indents for the subsequent component than it should.
I would expect the ternary not having any impact on the returning component.
Tested versions: 7.27.0 and 7.27.1
import React from 'react';
// works as expected - no props for the component in ternary
export const LintExample = () => {
const foo = true
? <div>test</div>
: false;
return <div
id="id"
>
test
</div>;
};
// works as expected - props for the component in ternary but ternary in one line
export const LintExample1 = () => {
const foo = true ? <div id="id">test</div> /* added prop "id" here*/ : false;
return <div
id="id"
>
test
</div>;
};
// does not work as expected - props for the component in ternary and ternary not in one line
export const LintExample2 = () => {
const foo = true
? <div id="id">test</div> // added prop "id" here
: false;
return <div
id="id" // linter complains: ESLint: Expected indentation of 6 space characters but found 4.(react/jsx-indent-props)
>
test
</div>;
};
I experience some odd behavior of
jsx-indent-propsdepending on a ternary before the actual component.When having a component with props within the ternary and not having the whole ternary in one line, the rule enforces more indents for the subsequent component than it should.
I would expect the ternary not having any impact on the returning component.
Tested versions: 7.27.0 and 7.27.1