New Rule: jsx-no-multiline-js about tslint-react

[scamden]

@adidahiya i'm curious how you handle simple conditional templates without multiline jsx?

for example:

{
variableThatCouldBeUndefined && 
  <div>
    <span>
     {variableThatCouldBeUndefined}
    </span>
  </div>
}

I started trying to refactor these kinds of things into functions, but i found that for simple cases like this it actually made the code much less readable as it scattered the pieces all over the file. I'm curious how you handle these and similar cases with this rule on.

[adidahiya]

@scamden yeah, I'd say that's fair criticism for this rule and might warrant a new rule option to allow simple conditional templates (limit the conditional expression itself to one line, otherwise this is easily abused).

currently, I end up with a lot of code like this:

render() {
  return (
    <div>
      {this.maybeRenderA()}
      {this.maybeRenderB()}
    </div>
  );
}

private maybeRenderA() {
  if (foo) {
    return ...
  }
}

private maybeRenderB() {
  if (bar) {
    return ...
  }
}

... I personally don't mind it too much but it is a stylistic preference that not everyone's going to agree with.

I mostly didn't like seeing a lot of JSX code like this:

{this.props.items.map((i: Item) => (
    <ItemComponent ... />
))}

[vyushin]

I just disabled it :)

{
  "extends": ["tslint:recommended" ,"tslint-react"],
  "rules": {
    "jsx-no-multiline-js": false
  }
}

[orta-sanz]

What is your alternative to this? Is there a better way that I am unaware of?

{this.props.items.map((i: Item) => (
    <ItemComponent ... />
))}

Yes, disable the rule and be happy

[AlexReff]

What is your alternative to this? Is there a better way that I am unaware of?

{this.props.items.map((i: Item) => (
    <ItemComponent ... />
))}

[scamden]

ya that could be cool to limit the scope of it slightly. i also had some terrible nested conditionals that were all scoped to one expression at the top level so i can see the desire to prevent that. but ya seems like a middle ground would be helpful

[leoskyrocker]

saying maybeA and maybeB is very different from saying if A else B
maybeA and maybeB means both can render at the same time.

[Alecell]

This rule is most for readability than another one reason and its awesome, I just get a legacy project with nested multiline jsx which takes the code readability to trash. I just want to say that since most people criticized that rule and IMO this rule is awesome.