JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div id="app"></div>

React

const arrLinks = ['Link1', 'Link2', 'Link3']
const arrContent = ['Content1', 'Content2', 'Content3']

class Tabbing extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            activeLinkId: false,
            activeContentId: false
        };
    }

    setActiveElement(id){
        this.setState({activeLinkId: id})
        this.setState({activeContentId: id})
    }

    handleClick() {

        const currentLinkState = this.state.activeLinkId;
        const currentContentState = this.state.activeContentId;

        this.setState({
            activeLinkId: !currentLinkState, 
            activeContentId: !currentContentState 
        });
    }

    render() {
        return (
            <div>
                <ul className="container-one">
                    {arrLinks.map((arrLinks, index) => 
                        <li data-key={arrLinks} key={index} className={index === this.state.activeLinkId ? 'active' : null} onClick={() => this.handleClick(index)}>
                            {arrLinks}
                        </li>
                    )}
                </ul>

                <ul className="container-two">
                    {arrContent.map((arrContent, index) => 
                        <li key={index} data-key={arrContent} className={index === this.state.activeContentId ? 'active' : null}>
                            {arrContent}
                        </li>
                    )}
                </ul>
            </div>
        )
    }
}

ReactDOM.render(<Tabbing />, document.querySelector("#app"))