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

🔧 This rule is automatically fixable by the --fix CLI option.

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

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.

Rule Options

Examples of incorrect code for this rule, when configured with parens or parens-new-line:

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

Examples of incorrect code for this rule, when configured with parens-new-line:

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

Examples of correct code for this rule:

var singleLineJSX = <p>Hello</p>

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

`declaration`

Examples of incorrect code for this rule, when configured with { declaration: "parens" }:

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

Examples of correct code for this rule, when configured with { declaration: "parens" }:

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

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

Examples of incorrect code for this rule, when configured with { declaration: "parens-new-line" }:

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

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

Examples of correct code for this rule, when configured with { declaration: "parens-new-line" }.

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

`assignment`

Examples of incorrect code for this rule, when configured with { assignment: "parens" }.

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

Examples of correct code for this rule, when configured with { assignment: "parens" }.

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

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

Examples of incorrect code for this rule, when configured with { assignment: "parens-new-line" }.

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

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

Examples of correct code for this rule, when configured with { assignment: "parens-new-line" }.

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

`return`

Examples of incorrect code for this rule, when configured with { return: "parens" }.

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

Examples of correct code for this rule, when configured with { return: "parens" }.

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

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

Examples of incorrect code for this rule, when configured with { return: "parens-new-line" }.

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

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

Examples of correct code for this rule, when configured with { return: "parens-new-line" }.

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

`arrow`

Examples of incorrect code for this rule, when configured with { arrow: "parens" }.

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

Examples of correct code for this rule, when configured { arrow: "parens" }.

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

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

Examples of incorrect code for this rule, when configured with { arrow: "parens-new-line" }.

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

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

Examples of correct code for this rule, when configured with { arrow: "parens-new-line" }.

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

`condition`

Examples of incorrect code for this rule, when configured with { condition: "parens" }.

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

Examples of correct code for this rule, when configured with { condition: "parens" }.

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

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

Examples of incorrect code for this rule, when configured with { condition: "parens-new-line" }.

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

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

Examples of correct code for this rule, when configured with { condition: "parens-new-line" }.

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

`logical`

Examples of incorrect code for this rule, when configured with { logical: "parens" }.

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

Examples of correct code for this rule, when configured with { logical: "parens" }.

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

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

Examples of incorrect code for this rule, when configured with { logical: "parens-new-line" }.

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

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

Examples of correct code for this rule, when configured with { logical: "parens-new-line" }.

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

`prop`

Examples of incorrect code for this rule, when configured with { prop: "parens" }.

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

Examples of correct code for this rule, when configured with { prop: "parens" }.

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

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

Examples of incorrect code for this rule, when configured with { 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>;

Examples of correct code for this rule, when configured with { prop: "parens-new-line" }.

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!