Question regarding JSX

[2color]

I have a question regarding the combination of JSX, ternary operators and indentation.

Assuming I have the following in my render function:

{
          removable
          ? <FloatingActionButton
            disabled={disabled || readonly}
            mini
            onClick={this.onDropIndexClick(index)}
            secondary
            <ContentRemove />
          </FloatingActionButton>
          : null
}

This is correct according to standard however It feels to me that all the props should be indented one level deeper to look as follows:

{
          removable
          ? <FloatingActionButton
              disabled={disabled || readonly}
              mini
              onClick={this.onDropIndexClick(index)}
              secondary
              <ContentRemove />
            </FloatingActionButton>
          : null
}

Which one do you think is correct and why?

[dcousens]

The first, as it is only 1 indent level, not 2.

[2color]

Thanks @dcousens