Alignment

  • Follow these alignment styles for JSX syntax. eslint: react/jsx-closing-bracket-location 

    1. // bad
    2. <Foo superLongParam="bar"
    3.      anotherSuperLongParam="baz" />
    5. // good
    6. <Foo
    7.   superLongParam="bar"
    8.   anotherSuperLongParam="baz"
    9. />
    11. // if props fit in one line then keep it on the same line
    13. // children get indented normally
    14. <Foo
    15.   superLongParam="bar"
    16.   anotherSuperLongParam="baz"
    17. >
    18.   <Quux />
    19. </Foo>
    21. // bad
    22. {showButton &&
    23.   <Button />
    25. // bad
    26. {
    27.   showButton &&
    28.     <Button />
    29. }
    31. // good
    32. {showButton && (
    33.   <Button />
    34. )}
    36. {showButton && <Button />}