Formatting jsx in js files with web-mode

Question

Say I have a function like this in a .js file:

import React, { Component, PropTypes } from 'react';
const Forecast = ({ summary, details }) => {
  if (!summary) return <div/>;

  const image = `http://openweathermap.org/img/w/${summary.get('icon')}.png`;

  return (
    <div className="col-lg-3 col-md-4 col-xs-6 thumb">
      <div className="thumbnail">
        <div className="weather">
          <img src={image}/>
        </div>
        <div className="caption">
          <h3>{summary.get('outlook')}</h3>
          <p>{summary.get('date').format('DD/MM/YYYY')}</p>
        </div>
      </div>
    </div>
  );
};

export default Forecast;

And I highlight the jsx code and format, this is the result:

import React, { Component, PropTypes } from 'react';

const Forecast = ({ summary, details }) => {
  if (!summary) return <div/>;

  const image = `http://openweathermap.org/img/w/${summary.get('icon')}.png`;

  return (
    <div className="col-lg-3 col-md-4 col-xs-6 thumb">
    <div className="thumbnail">
    <div className="weather">
    <img src={image}/>
    </div>
    <div className="caption">
    <h3>{summary.get('outlook')}</h3>
    <p>{summary.get('date').format('DD/MM/YYYY')}</p>
    </div>
    </div>
    </div>
  );
};

export default Forecast;

Is it possible to configure web-mode to format the jsx with correct indentation?

Answer 1

The answer was to add the following to my init.el

(setq web-mode-content-types-alist
  '(("jsx" . "\\.js[x]?\\'")))