jsx-closing-bracket-location when returning directly

[danielkcz]

With default settings, this is considered warning. I am wondering how do you write this kind of code.

    render() {
        return (<Application
            {...defaultProps}
            {...this.props}
            {...options}
        />);
    }

This looks totally weird in my opinion...

    render() {
        return (
        <Application
            {...defaultProps}
            {...this.props}
            {...options}
        />);
    }

[yannickcr]

I personally write it this way:

    render() {
        return (
            <Application
                {...defaultProps}
                {...this.props}
                {...options}
            />
        );
    }

[danielkcz]

Ah I see, that doesn't look so bad except it's two extra lines. Hmm. Do you think it would be possible to extend the rule so it can recognize alignment to return keyword ?

[yannickcr]

It is possible to add another location type, with the same behavior of tag-aligned except when the tag is preceded with return.

render() {
  return (<App
    <Component
      {...defaultProps}
      {...this.props}
      {...options}
    />
  </App>);
}

[csilvers]

I think it's not just return. (We are seeing this same issue, and would prefer not to have the extra parens.) For instance, we'd like to be able to do

   var x = <App
      ...
   />;

A rule that makes sense to me is something like "equal the indentation of the line where the tag started". But I don't know if that gives bad results in other situations.