Jsx Expression Braces

Place the opening and closing curly braces of JSX child expression containers on separate isolated lines. A single-line <td> containing only property access, including optional chaining, may keep its expression inline. For every multiline JavaScript expression inside JSX curly braces, including attribute values, place the expression on lines separate from both braces. Single-line attribute expressions may remain beside their braces.

Correct

export default item => <td>{item?.firstName}</td>
export default ({ title }) => <h1>
    {
        title
    }
</h1>
<Field
    disabled
    value={
        ready
            ?
            'yes'
            :
            'no'
    }
/>

Incorrect

export default ({ title }) => <h1>{title}</h1>
<Field
    disabled
    value={ready
        ?
        'yes'
        :
        'no'
    }
/>
<Field
    disabled
    value={
        ready
            ?
            'yes'
            :
            'no'}
/>

Exceptions

• A single-line <td> element may keep inline braces when its only content is property access, including optional chaining. Calls, operators, additional content, and multiline cells do not qualify.

Fix

Put child-expression braces on their own lines, except in single-line <td> elements containing only property access. In multiline attribute expressions, put the opening brace after the attribute name, start the expression on the next line, and put the closing brace on a separate line after the expression.