gistfile1.txt

var React = require("react");
var bs = require("react-bootstrap");



var RHInput = React.createClass({
    //contextTypes: { getValue: React.PropTypes.func.isRequired },
    natEnglishFormCamelCase: function (val) {
        //make this work
        return val.toUpperCase();
    },
    getInitialState: function () {
        return {"myValue": this.props.value,
            "name": {
                "ref": this.props.name,
                "label": this.natEnglishFormCamelCase(this.props.name),
                "placeholder": this.natEnglishFormCamelCase(this.props.name)
            }};
    },
    getValue:function(){
        return this.state.myValue;
    },
    handleChange: function (event) {
        this.setState({myValue: event.target.value});
    },

    handleClick(event){
        this.props.getValue(this.state.firstName);
    },

    render: function () {
        return (<bs.Input ref={this.state.name.ref} type='text' label={this.state.name.label} placeholder={this.state.name.placeholder} value={this.state.myValue} onChange={this.handleChange}   />)
    }

});

module.exports = RHInput;




/**
 * Created by rharik on 3/26/2015.
 */
var React = require("react");
var bs = require("react-bootstrap");
var RHInput = require("./rhInput");


var App = React.createClass({
    getInitialState: function() {
        return {   "firstName":"Raif",
                    "lastName":""
        };
    },
    getValue: function(event) {
        this.setState({firstName: event});
    },

    inputSection:function() {
        return (<span>
            <RHInput name='firstName' value={this.state.firstName} getValue={this.getValue.bind(this)} />
            <RHInput name='lastName' value={this.state.lastName} getValue={this.getValue.bind(this)} />
            <button onClick={this.click} />
        </span>)
    },

    viewSection:function() {
        return (<span>
            <div>
                <label><span>First Name</span></label>
                <p>Raif</p>
            </div>
            <div>
                <label ><span>Last Name</span></label>
                <p>Harik</p>
            </div>
        </span>)
    },

    render: function() {
        return (<bs.Grid>
                    <bs.Row className='show-grid'>
                        <bs.Col md={8}>
                            <bs.Well>
                                {this.inputSection()}
                                {this.viewSection()}
                            </bs.Well>
                        </bs.Col>
                    </bs.Row>
                </bs.Grid> );
    }
});
var data =  {

};




React.render(<App/>, document.getElementById("example"));