React

by iBertel

HTML

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

SCSS

.container-one, .container-two {
  li {
    &.active {
      color:red;
    }
  }
}

React

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

class Tabbing extends React.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() {
        //console.log(e.target.getAttribute('data-key'));

        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"))