Как мне переключить класс div в зависимости от того, какая кнопка была нажата в React?

Question

Я создаю страницу продукта в своем приложении React (ES6) для отображения различных функций продукта. Там будет кнопка для каждой функции и div для каждой функции, отображающей информацию.

Когда нажата кнопка, она должна переключить активный класс на соответствующий div содержимого, однако я довольно новичок в React, так что Я не уверен, как это будет сделано в отношении переключения класса.

Мой код в следующем виде:

import React, { useContext } from "react";
import { Link } from "react-router-dom";
import '../App.scss';
import ProductData from "./data/ProductData";
import { ChoicesContext } from "../context/ChoicesProvider";

class Product extends React.Component {

  constructor(props) {
      super(props);
      this.toggleClass= this.toggleClass.bind(this);
      this.state = {
          active: false,
      };
  }
  toggleClass() {
      const currentState = this.state.active;
      this.setState({ active: !currentState });
  };

  static contextType = ChoicesContext;

  render() {
    const { choices } = this.context;
    const CurrentProduct = ProductData.filter(x => x.name === choices.productSelected);

    return (
      <>

        <div className="product wrapper d-md-flex">

          <main>

            <Link
              {/* Need this to toggle active class to <Overlay text={'Overlay 1'} /> */}
              className="btn-reverse overlay"
            >TOC</Link>

            <Link
              {/* Need this to toggle active class to <Overlay text={'Overlay 2'} /> */}
              className="btn-reverse overlay"
            >Puresure</Link>

            <Overlay text={'Overlay 1'} />
            <Overlay text={'Overlay 2'} />

          </main>
        </div>
      </>
    )
  }
}
export default Product;

class Overlay extends React.Component {
  render() {
    return (
      <div className="overlay">
        <h2>{this.props.text}</h2>
      </div>
    )
  }
}

Answer 1

Я рекомендую вам использовать npm пакет classNames

import classNames from 'classnames';

...
const classes = classNames('btn-reverse', 'overlay', {
  'active': this.state.active
})

...
<div className={classes}> .... </div>

Работает по следующему сценарию: если this.state.active === true, то классы будут 'btn-reverse overlay active' else 'btn-reverse overlay'

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