переключение табов на eact

gistfile1.txt

import React, {Component } from 'react';
import EditorComponent from '@prisma-cms/front-editor/lib/components/App/components/';
import MainBlock from '../../blocks/RootWrapper/MainBlock';
import Breadcrumbs from '../../blocks/Breadcrumbs';
import SubscribeMailing from "../../markup/source/blocks/mailing/forms/subscribeMailing";
import Mailing from "../../markup/source/blocks/mailing";
import './style.scss';


export class FaqPage extends EditorComponent {

    static Name = 'FaqPage';

    static defaultProps = {
        ...EditorComponent.defaultProps,
        hide_wrapper_in_default_mode: true,
    };

    constructor(props) {

        super(props);

        this.state = {
            activeTab: 'video',
            answerActive: false
        }

    }

    toggleClassName(name){
      this.setState(
          {
              activeTab: name,
          }
      )
    };

    openClose(){
        this.setState(
            (state)=>({
                ...state,
                answerActive:!state.answerActive
            }))
    }

    componentDidMount() {
        window.scrollTo(0,0);
        super.componentDidMount && super.componentDidMount();
    }

    renderPanelView(content) {

        const {
            classes,
        } = this.getEditorContext();

        return super.renderPanelView(
            content ||
            <div
                className={classes.panelButton}
            >
                FaqPage
            </div>
        );
    }

    getRootElement() {

        return super.getRootElement();
    }

    canBeParent(parent) {

        // return super.canBeParent(parent);
        return parent instanceof MainBlock;
    }

    canBeChild(child) {

        return super.canBeChild(child);
    }


    renderChildren() {

        const {
        } = this.context;

        const {
        } = this.getEditorContext();

        const {
            ...other
        } = this.getComponentProps(this);

        const children = super.renderChildren();

        let breadcrumbs;

        const breadcrumbsIndex = children.findIndex(n => n.type === Breadcrumbs);

        if (breadcrumbsIndex !== -1) {
            breadcrumbs = children.splice(breadcrumbsIndex, 1);
        }
         const {
            0: textQuestion,
            1: videoQuestion,
        } = children.splice(0, 2);
        const {activeTab, answerActive} = this.state;
        return (
            <>
                {breadcrumbs}
                <div className="faq-page-container secondary-hero">
                    <div className="container">
                        <div className="section-header">
                            <span>Вопросы-Ответы</span>
                        </div>
                        <div className="page-aside__mobile">
                        </div>
                        <div className="page-aside">
                        </div>
                        <div className="faq-page">
                            <div className="page-tabs">
                                <div className="page-nav">
                                    <div className= {`${activeTab === 'video' ? 'active' : ''} page-nav__item`} onClick={()=>this.toggleClassName('video')}>
                                        <p>Видео-ответы</p>
                                    </div>
                                    <div className={`${activeTab === 'text' ? 'active' : ''} page-nav__item`} onClick={()=>this.toggleClassName('text')}>
                                        <p>Текстовые ответы</p>
                                    </div>
                                </div>
                                <div className="page-tab faq-page__tab faq-page__mobile-p jss112">
                                    {activeTab === 'video' ?
                                        videoQuestion
                                        : textQuestion

                                    }
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
            </>
        )
    }
}
export default FaqPage;