React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

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>

JavaScript 1.7

/*
** Components with the children inputs
*/
var SearchWithOne = React.createClass({
    displayName: 'SearchWithOne',
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {
            someName : ''
        }
    },
    getData: function() {
        return this.state;
    },
    render: function (){
        return (
            <span>
                <input type='text' placeholder='Some Name' valueLink={this.linkState('someName')}/>
            </span>
        );
    }
});
          
var SearchWithTwo = React.createClass({
    displayName: 'SearchWithTwo',
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {
            someName : '',
            location: ''
        }
    },
    getData: function() {
        return this.state;
    },
    render: function() {
        return (
            <span>
                <input type='text' placeholder='Some Name' valueLink={this.linkState('someName')}/>
                <input type='text' placeholder='State, City, Zip' valueLink={this.linkState('location')}/>
            </span>
        );
    }
});


/*
** Search Container
** SearchBoxes is an object with props because I have no idea how many I may have
*/
var SearchBoxes = {'SearchWithTwo': SearchWithTwo, 'SearchWithOne': SearchWithOne};

var SearchContainer = React.createClass({
    displayName: 'SearchContainer',
    getInitialState: function() {
        return {
            searchTypes: ['SearchWithTwo', 'SearchWithOne'],
            SearchBox: <SearchBoxes.SearchWithTwo/>
        };
    },
    updateSearchFields: function(value) {
        var SearchBox = SearchBoxes[value];
        this.setState({'SearchBox': <SearchBox/>});
    },
    handleSubmit: function(e) {
        e.preventDefault();
        var form = this.getDOMNode(),
            fd = new FormData(form);

        var submitData = this.state.SearchBox.getData();

        // submit the values to get results.
    },
    render:...