GroupButtonState.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class GroupButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: props.initialIndex,
    };
  }
  
  onSelectButton(index) {
    this.setState({
      activeIndex: index
    });
  }
  
  isActive(index) {
    return index === this.state.activeIndex;
  }
  
  render() {
    return (
      <div className='btn-group'>
        <button
          className=`btn ${this.isActive(0) ? 'btn-active': ''}`
          onClick={() => this.onSelectButton(0)}
        >
          First
        </button>
        <button
          className=`btn ${this.isActive(1) ? 'btn-active': ''}`
          onClick={() => this.onSelectButton(1)}
        >
          Second
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <GroupButton initialIndex={0} />,
  document.getElementById('root')
);