React Design Patterns and Best Practices - Second Edition

Multi-properties

A common problem in writing JSX comes when an element has multiples attributes. One solution is to write all the attributes on the same line, but this would lead to very long lines that we do not want in our code (see the following section for how to enforce coding style guides).

A common solution is to write each attribute on a new line, with one level of indentation, and then align the closing bracket with the opening tag:

  <button     foo="bar"     veryLongPropertyName="baz"     onSomething={this.handleSomething}   />