jsx atom formatting issue

FormatTest-after.jsx

var React = require('react');

class FormatTest extends React.Component {
  render() {
    var x = this
      .state
      .data
      .map(function(d, index) {
        return <tr key={index}>
          <td>{d.name}</td>
          <td>{d.abbreviation}</td>
        </tr>
      });
    var className = "myclass";

    return (
      <div>
        <div className={{
          className
        }}>
          <table>
            <tbody>
              {x}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

FormatTest-before.jsx

var React = require('react');

class FormatTest extends React.Component {
  render() {
    var x = this.state.data.map(function(d, index) {
        return <tr key={index}>
          <td>{d.name}</td>
          <td>{d.abbreviation}</td>
        </tr>
      });
    var className = "myclass";
    
    return (
      <div>
        <div className={{className}}>
          <table>
            <tbody>
              {x}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}