JSON Formatter (React)

JSON Formatter with ReactJS

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>

CSS

body {
    font-family: sans-serif;
}

textarea {
    border:      1px solid black;
    font-family: monospace;
    font-size:   10pt;
    display:     block;
    height:      10em;
    width:       100%;
}

.small {
    font-size: smaller;
}

.output-good {
    color:            green;
    background-color: white;
}

.output-error {
    color:            white;
    background-color: red;
}

JavaScript 1.7

var Formatter = React.createClass({
  
  getInitialState: function() {
    return {
      inputText: '',
      indent:    '2'
    };
  },
  
  render: function() {
    return (
      <div>
      
        <h1>JSON Reformatter</h1>
        
        <textarea
          value={this.state.inputText}
          onChange={this.onInputTextChange}
          placeholder="Paste your JSON here"
          autofocus="true" />
        
        <button onClick={this.clearInputText}>Clear Input Text</button>
        
        <FormattedJSON
          inputText={this.state.inputText}
          indent={10} />
        
        <div className="indentation">
          Indentation:
          <select
            value={this.state.indent}
            onChange={this.onIndentationChange}
          >  
            <option value="0">No spaces</option>
            <option value="1">One space</option>
            <option value="2">Two spaces</option>
            <option value="3">Three spaces</option>
            <option value="4">Four spaces</option>
            <option value="8">Eight spaces</option>
            <option value="TAB">Tabs</option>
          </select>
        </div>
        
      </div>
    );
  }, 
  
  clearInputText: function() {
    this.setState({'inputText': ''});
  },
  
  onInputTextChange: function(event) {
    this.setState({'inputText': event.target.value});
  },

  onIndentationChange: function(event) {
    this.setState({'indent' : event.target.value});
  }
});

var FormattedJSON = React.createClass({
  render: function() {
    var outputText, outputClass;
    
    try {
      var indent = this.props.indent;
      var space = (indent === 'TAB') ? '\t' : parseInt(indent);
        
      outputText = this.formatJSON(this.props.inputText, space);
      outputClass = 'output-good';
    }
    catch (err) {
      // JSON.parse threw an exception
      outputText = err.message;
      outputClass = 'output-error';
    }
    
    return (
      <textarea
       ...