JSX output problems

[kasperpeulen]

It makes from this:

    <form className="ActionsModal">
      <Modal show={show} onHide={close}>
        <Modal.Header closeButton>
          <Modal.Title>Actions</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <FormGroup controlId="selectAction">
            <ControlLabel>Select an action:</ControlLabel>
            <FormControl
              componentClass="select"
              value={selectedAction}
              onChange={(e) => dispatch(new Actions.ChangeSelected(e.target.value))}
            >
              {actions.map(action =>
                <option key={action} value={action}>{action}</option>
              )}
            </FormControl>
          </FormGroup>
          {exerciseIdInput}
        </Modal.Body>
        <Modal.Footer>
          <Button disabled={!validExerciseId} onClick={close}>Close</Button>
        </Modal.Footer>
      </Modal>
    </form>

This:

    <form className="ActionsModal">
      <Modal show={show} onHide={close}>
        <Modal.Header closeButton>
          <Modal.Title>Actions</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <FormGroup controlId="selectAction">
            <ControlLabel>Select an action:</ControlLabel>
            <FormControl
    componentClass="select"
    value={selectedAction}
    onChange={(e) => dispatch(new Actions.ChangeSelected(e.target.value))}
    >
              {actions.map(action => <option key={action} value={action}>{action}</option>
    )}
            </FormControl>
          </FormGroup>
          {exerciseIdInput}
        </Modal.Body>
        <Modal.Footer>
          <Button disabled={!validExerciseId} onClick={close}>Close</Button>
        </Modal.Footer>
      </Modal>
    </form>

I don't like the identation here:

    componentClass="select"
    value={selectedAction}
    onChange={(e) => dispatch(new Actions.ChangeSelected(e.target.value))}

I think it should have more indent than <FormControl> not less.

[millermedeiros]

@kasperpeulen are you using the esformatter-jsx plugin? right now esformatter by itself doesn't do anything special about JSX (it doesn't know that it should indent the JSXAttribute...)

we should probably improve this behavior, but it's tricky given our current indentation logic (we basically discard ALL the original indentation and redo the whole indentation..) - to be honest, I don't even know why it didn't remove the indentation from all the JSXElements.