Parentheses

  • Wrap JSX tags in parentheses when they span more than one line. eslint: react/jsx-wrap-multilines

    1. // bad
    2. render() {
    3.   return <MyComponent variant="long body" foo="bar">
    4.            <MyChild />
    5.          </MyComponent>;
    6. }
    8. // good
    9. render() {
    10.   return (
    11.     <MyComponent variant="long body" foo="bar">
    12.       <MyChild />
    13.     </MyComponent>
    14.   );
    15. }
    17. // good, when single line
    18. render() {
    19.   const body = <div>hello</div>;
    20.   return <MyComponent>{body}</MyComponent>;
    21. }