tab.jsx

export class RulesWrapTabs extends Component {
  constructor(props) {
    super(props)
    this.state = {
      activeIndex: 0,
    }
  }

  render() {
    return (
      <Wrapper>
        <ButtonWrapper>
          {this.props.tabs.map((el, index) => (
            <Button
              key={index}
              onClick={() => this.setState({ activeIndex: index })}
            >
              {el.title}
            </Button>
          ))}
        </ButtonWrapper>
        <DataRender>
          {this.props.tabs.map((el, index) => {
            return React.cloneElement(el.component, {
              isActive: this.state.activeIndex === index,
            })
          })}
        </DataRender>
      </Wrapper>
    )
  }
}