React Zurb ProgressBar State Gist

index.js

var ProgressBar = React.createClass({
    getInitialState: function () {
        return {
            position: 0
        };
    },
    proceed: function () {
        this.setState(function (currentState) {

            if (currentState.position >= 100) {
                currentState.position = 0;
                return;
            }

            return {
                position: currentState.position + this.props.step
            };
        });
    },
    render: function () {

        var color = this.props.color;
        var position = this.state.position;

        return (
            <div>
                <div className={classNames("progress", color)} role="progressbar">
                    <div className="progress-meter" style={{width: position + '%'}}></div>
                </div>
                <button onClick={this.proceed} type="button" className="success button">Proceed.. {position} %</button>
            </div>
        );
    }
});

var container = document.querySelectorAll(".placeholder");
ReactDOM.render(<ProgressBar color="alert" step={10}/>, container[0]);