Edit in JSFiddle

var Button = React.createClass({
    getDefaultProps: function() {
        return {
            actived: false,
            onClick: function() {}
        };
    },
    render: function() {
        className = "button"
        className += this.props.actived ? ' actived' : '';
        return <div className={className} onClick={this.props.onClick}></div>;
    }
});

var ButtonGroup = React.createClass({
    getInitialState: function() {
        return {
            status: [false, false, false]
        };
    },
    onClick: function(i) {
        var status = [];
        for (j = 0; j < this.state.status.length; ++j) {
            status[j] = j === i;
        }
        this.setState({ status: status });
    },
    render: function() {
        var that = this;
        buttons = this.state.status.map(function(curr, i) {
            onClick = function() { that.onClick(i); };
            return <Button key={i} onClick={onClick} actived={that.state.status[i]}/>
        });
        return <div className="button-group">{buttons}</div>
    }
});
 
React.render(<ButtonGroup/>, document.body);

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

.button {
    display: inline-block;
    width:  3rem;
    height: 3rem;
    margin-right: 0.5rem;
    background-color: #000;
}

.button:last-child {
    margin-right: 0;
}

.actived {
    background-color: #f00;
}