ReactJS Demo

buttons.js

var index = this.state.index;
var state = states.states.state[index]["@attributes"];

var prevButton ="";
var nextButton  ="";
if (index>0) {
     prevButton = <button type="button" className="btn btn-primary" onClick={this.handlePrev}>Prev</button>;
}
if (index<50) {
     nextButton= <button type="button" className="btn btn-primary" onClick={this.handleNext}>Next</button>;
 }

return (
.....
);

index.html

<div class="row">


    <div class="col-md-2"></div>

    <div class="col-md-8">

        <div id="state-info"></div>

    </div>

    <div class="col-md-2"></div>

</div>

react-init.js

React.render(
    <StateInfo/>
    ,
    document.getElementById('state-info')
);

stateinfo-render.js

          <div>
                <hr/>
                <div className="row">
                    <div className="col-md-2"></div>
                    <div className="col-md-10">
                        <h2>{state.name}</h2>
                        <hr/>
                    </div>
                </div>

                <div className="row">

                    <div className="col-md-10">

                        <StateInfoItem label="Abbreviation" value={state.abbreviation}/>
                        <StateInfoItem label="Capital" value={state.capital}/>
                        <StateInfoItem label="Largest City" value={state["most-populous-city"]}/>

                    </div>

                </div>

                <div className="row">

                    <div className="col-md-5">
                    {prevButton}
                        </div>
                    <div className="col-md-2"></div>
                    <div className="col-md-5">

                    {nextButton}
                        </div>

                </div>
            </div>

stateinfo-states.js

   getInitialState: function() {
      return {"index": 0}

    },


    handlePrev: function() {
        this.setState({"index":this.state.index-1});

    },


    handleNext: function() {
        this.setState({"index":this.state.index+1});


    },

stateinfo.js

var StateInfo = React.createClass({
.....

};

stateinfoitem.js

var StateInfoItem = React.createClass({

    render: function() {

        return (
            <dl className="dl-horizontal">
                <dt>{this.props.label}</dt>
                <dd>{this.props.value}</dd>
            </dl>


        )
    }

});