Переключай класс только на один элемент, реагируй js

Question

Я меняю класс после нажатия, и это работает. Проблема в том, что классы меняются одновременно в обоих элементах, а не в каждом отдельно. Может кто-то мог посмотреть, что я делаю не так. Любая помощь будет полезна.

import React, { Component } from "react";

class PageContentSupportFaq extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isExpanded: false
    };
  }

  handleToggle(e) {
    this.setState({
      isExpanded: !this.state.isExpanded
    });
  }

  render() {
    const { isExpanded } = this.state;
    return (
      <div className="section__support--faq section__full--gray position-relative">
        <div className="container section__faq">
          <p className="p--thin text-left">FAQ</p>
          <h2 className="section__faq--title overflow-hidden pb-4">Title</h2>
          <p className="mb-5">Subtitle</p>
          <div className="faq__columns">
            <div
              onClick={e => this.handleToggle(e)}
              className={isExpanded ? "active" : "dummy-class"}
            >
              <p className="mb-0">
                <strong>First</strong>
              </p>
            </div>

            <div
              onClick={e => this.handleToggle(e)}
              className={isExpanded ? "active" : "dummy-class"}
            >
              <p className="mb-0">
                <strong>Second</strong>
              </p>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default PageContentSupportFaq;

Answer 1

Вы можете получить два состояния одно состояние для первого и другое для второго и обрабатывать, используя две функции, подобные этой

   import React, { Component } from 'react';

    class PageContentSupportFaq extends Component {
      constructor(props) {
        super(props)
        this.state = {
          isExpanded: false,
          isExpanded2:false,
        }
      }

      handleToggle(e){
        this.setState({
          isExpanded: !this.state.isExpanded
        })
      }
     handleToggle2(e){
        this.setState({
          isExpanded2: !this.state.isExpanded2
        })
      }

      render() {
        const {isExpanded,isExpanded2} = this.state;
        return (
          <div className="section__support--faq section__full--gray position-relative">


            <div className="container section__faq">
              <p className="p--thin text-left">FAQ</p>
              <h2 className="section__faq--title overflow-hidden pb-4">Title</h2>
              <p className="mb-5">Subtitle</p>
              <div className="faq__columns">

                <div onClick={(e) => this.handleToggle(e)} className={isExpanded ? "active" : "dummy-class"}>
                  <p className="mb-0"><strong>First</strong></p>
                </div>

                <div onClick={(e) => this.handleToggle2(e)} className={isExpanded2 ? "active" : "dummy-class"}>
                  <p className="mb-0"><strong>Second</strong></p>
                </div>


              </div>

            </div>

          </div>
        );
      }

    }

    export default PageContentSupportFaq;

Answer 2

Вам нужно будет отслеживать переключаемые классы в массиве, чтобы он поддерживал произвольное количество компонентов:

// Save elements data into array for easier rendering
const elements = [{ id: 1, name: "First" }, { id: 2, name: "Second" }];

class PageContentSupportFaq extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: []
    };
  }

  handleToggle(id) {
    this.setState(state => {
      if (state.isExpanded.includes(id)) {
        return state.isExpanded.filter(elId => elId !== id);
      }
      return [...state.expanded, id];
    });
  }

  render() {
    return elements.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={this.isExpanded(el.id) ? "active" : "dummy-class"}
      >
        <p className="mb-0">
          <strong>{el.name}</strong>
        </p>
      </div>
    ));
  }
}

Answer 3

Каждый элемент должен иметь отдельное расширенное значение. Итак, нам нужен массив в состоянии.

А вот код:

import React, { Component } from "react";

class PageContentSupportFaq extends Component {
  state = {
    items: [
      { id: 1, name: "First", expanded: false },
      { id: 2, name: "Second", expanded: true },
      { id: 3, name: "Third", expanded: false }
    ]
  };

  handleToggle = id => {
    const updatedItems = this.state.items.map(item => {
      if (item.id === id) {
        return {
          ...item,
          expanded: !item.expanded
        };
      } else {
        return item;
      }
    });

    this.setState({
      items: updatedItems
    });
  };

  render() {
    return this.state.items.map(el => (
      <div
        key={el.id}
        onClick={() => this.handleToggle(el.id)}
        className={el.expanded ? "active" : "dummy-class"}
      >
        <p className="mb-0">
          <strong>{el.name}</strong>
          <span> {el.expanded.toString()}</span>
        </p>
      </div>
    ));
  }
}

export default PageContentSupportFaq;