получить индекс от щелчка и установить класс на тот же индекс в другом контейнере в компоненте реакции

Question

Я пытаюсь получить индекс, когда нажимаю ссылку, а затем устанавливаю класс для выбранной ссылки и класс для того же индекса в другом контейнере.

Ссылка на скрипку: https://jsfiddle.net/iBertel/jw34bLed/5/

Пока это мой код:

import React, { Component } from '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() {
        //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>
        )
    }
}

export default Tabbing

Answer 1

Добавить параметр index в handleClick и сохранить в состоянии. Я предполагаю, что массивы arrLinks и arrContent имеют одинаковую длину, и вы хотели использовать один и тот же индекс для переключения активного класса для обоих. Используйте только один индекс в состоянии, не нужно его дублировать.

class Tabbing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeLinkId: null
    };
  }

  handleClick = index => {
    this.setState({
      activeLinkId: index
    });
  }

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

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