eslint-plugin-react/docs/rules/jsx-wrap-multilines.md

Prevent missing parentheses around multiline JSX (react/jsx-wrap-multilines)

Wrapping multiline JSX in parentheses can improve readability and/or convenience.

Fixable: This rule is automatically fixable using the --fix flag on the command line.

Rule Details

This rule optionally takes a second parameter in the form of an object, containing places to apply the rule. By default, all the syntax listed below will be checked except the conditions out of declaration or assignment, logical expressions and JSX attributes, but these can be explicitly disabled. Any syntax type missing in the object will follow the default behavior displayed below.

{
  "declaration": "parens",
  "assignment": "parens",
  "return": "parens",
  "arrow": "parens",
  "condition": "ignore",
  "logical": "ignore",
  "prop": "ignore"
}

Note: conditions are checked by default in declarations or assignments.

The following patterns are considered warnings when using parens or parens-new-line:

var Hello = createReactClass({
  render: function() {
    return <div>
      <p>Hello {this.props.name}</p>
    </div>;
  }
});

The following patterns are considered warnings when using parens-new-line:

var Hello = createReactClass({
  render: function() {
    return (<div>
      <p>Hello {this.props.name}</p>
    </div>);
  }
});

The following patterns are not considered warnings:

var singleLineJSX = <p>Hello</p>

var Hello = createReactClass({
  render: function() {
    return (
      <div>
        <p>Hello {this.props.name}</p>
      </div>
    );
  }
});

declaration

The following patterns are considered warnings when configured {declaration: "parens"}.

var hello = <div>
  <p>Hello</p>
</div>;

The following patterns are not considered warnings when configured {declaration: "parens"}.

var hello = (
  <div>
    <p>Hello</p>
  </div>
);

var hello = (<div>
  <p>Hello</p>
</div>);

The following patterns are considered warnings when configured {declaration: "parens-new-line"}.

var hello = <div>
  <p>Hello</p>
</div>;

var hello = (<div>
  <p>Hello</p>
</div>);

The following patterns are not considered warnings when configured {declaration: "parens-new-line"}.

var hello = (
  <div>
    <p>Hello</p>
  </div>
);

assignment

The following patterns are considered warnings when configured {assignment: "parens"}.

var hello;
hello = <div>
  <p>Hello</p>
</div>;

The following patterns are not considered warnings when configured {assignment: "parens"}.

var hello;
hello = (
  <div>
    <p>Hello</p>
  </div>
);

var hello;
hello = (<div>
  <p>Hello</p>
</div>);

The following patterns are considered warnings when configured {assignment: "parens-new-line"}.

var hello;
hello = <div>
  <p>Hello</p>
</div>;

var hello;
hello = (<div>
  <p>Hello</p>
</div>);

The following patterns are not considered warnings when configured {assignment: "parens-new-line"}.

var hello;
hello = (
  <div>
    <p>Hello</p>
  </div>
);

return

The following patterns are considered warnings when configured {return: "parens"}.

function hello() {
  return <div>
    <p>Hello</p>
  </div>;
}

The following patterns are not considered warnings when configured {return: "parens"}.

function hello() {
  return (
    <div>
      <p>Hello</p>
    </div>
  );
}

function hello() {
  return (<div>
    <p>Hello</p>
  </div>);
}

The following patterns are considered warnings when configured {return: "parens-new-line"}.

function hello() {
  return <div>
    <p>Hello</p>
  </div>;
}

function hello() {
  return (<div>
    <p>Hello</p>
  </div>);
}

The following patterns are not considered warnings when configured {return: "parens-new-line"}.

function hello() {
  return (
    <div>
      <p>Hello</p>
    </div>
  );
}

arrow

The following patterns are considered warnings when configured {arrow: "parens"}.

var hello = () => <div>
  <p>World</p>
</div>;

The following patterns are not considered warnings when configured {arrow: "parens"}.

var hello = () => (
  <div>
    <p>World</p>
  </div>
);

var hello = () => (<div>
  <p>World</p>
</div>);

The following patterns are considered warnings when configured {arrow: "parens-new-line"}.

var hello = () => <div>
  <p>World</p>
</div>;

var hello = () => (<div>
  <p>World</p>
</div>);

The following patterns are not considered warnings when configured {arrow: "parens-new-line"}.

var hello = () => (
  <div>
    <p>World</p>
  </div>
);

condition

The following patterns are considered warnings when configured {condition: "parens"}.

<div>
  {foo ? <div>
      <p>Hello</p>
    </div> : null}
</div>

The following patterns are not considered warnings when configured {condition: "parens"}.

<div>
  {foo ? (<div>
      <p>Hello</p>
  </div>) : null}
</div>

<div>
  {foo ? (
    <div>
      <p>Hello</p>
    </div>
  ): null}
</div>

The following patterns are considered warnings when configured {condition: "parens-new-line"}.

<div>
  {foo ? <div>
      <p>Hello</p>
    </div> : null}
</div>

<div>
  {foo ? (<div>
      <p>Hello</p>
  </div>) : null}
</div>

The following patterns are not considered warnings when configured {condition: "parens-new-line"}.

<div>
  {foo ? (
    <div>
      <p>Hello</p>
    </div>
  ): null}
</div>

logical

The following patterns are considered warnings when configured {logical: "parens"}.

<div>
  {foo &&
    <div>
      <p>Hello World</p>
    </div>
  }
</div>

The following patterns are not considered warnings when configured {logical: "parens"}.

<div>
  {foo &&
    (<div>
      <p>Hello World</p>
    </div>)
  }
</div>

<div>
  {foo && (
    <div>
      <p>Hello World</p>
    </div>
  )}
</div>

The following patterns are considered warnings when configured {logical: "parens-new-line"}.

<div>
  {foo &&
    <div>
      <p>Hello World</p>
    </div>
  }
</div>

<div>
  {foo &&
    (<div>
      <p>Hello World</p>
    </div>)
  }
</div>

The following patterns are not considered warnings when configured {logical: "parens-new-line"}.

<div>
  {foo && (
    <div>
      <p>Hello World</p>
    </div>
  )}
</div>

prop

The following patterns are considered warnings when configured {prop: "parens"}.

<div foo={<div>
    <p>Hello</p>
  </div>}>
  <p>Hello</p>
</div>;

The following patterns are not considered warnings when configured {prop: "parens"}.

<div foo={(<div>
    <p>Hello</p>
  </div>)}>
  <p>Hello</p>
</div>;

<div foo={(
  <div>
    <p>Hello</p>
  </div>
)}>
  <p>Hello</p>
</div>;

The following patterns are considered warnings when configured {prop: "parens-new-line"}.

<div foo={<div>
    <p>Hello</p>
  </div>}>
  <p>Hello</p>
</div>;

<div foo={(<div>
    <p>Hello</p>
  </div>)}>
  <p>Hello</p>
</div>;

The following patterns are not considered warnings when configured {prop: "parens-new-line"}.

<div foo={(
  <div>
    <p>Hello</p>
  </div>
)}>
  <p>Hello</p>
</div>;