reactHuyakt.js

export default class BtnGroup extends React.Component {
  state = {
    active: null
  };

  onClick = ({ target }) => {
    const getSide = target.classList[2];
    this.setState({ active: getSide });
  }

  render() {
    const defaultBtnClass = 'btn btn-secondary';
    const isLeftActive = this.state.active === 'left' ? ' active' : '';
    const isRightActive = this.state.active === 'right' ? ' active' : '';

    const leftBtnClass = `${defaultBtnClass} left${isLeftActive}`;
    const rightBtnClass = `${defaultBtnClass} right${isRightActive}`;
    return <div className="btn-group" role="group">
  <button onClick={this.onClick} type="button" className={leftBtnClass}>Left</button>
  <button onClick={this.onClick} type="button" className={rightBtnClass}>Right</button>
</div>;
  }
}